Im using python3 pdfkit to convert html to pdf .
When using macbook , CSS (Bootstrap 5) are not applied properly while generating pdf but the same works fine in ubuntu .
is there any issue with MAC OS ? im using MacOS Big Sur Version11.4
Thanks in advance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Georgian&display=swap" rel="stylesheet">
<style>
#media print {
#LEFT li {
height: auto !important;
}
}
/* #LEFT li{
height: 100%;
} */
.bg-ab {
background-color: #f5f4f7 !important;
}
.icon_circle_success {
border-radius: 50%;
border: 1px solid #198754;
padding: 6px 6px;
margin-right: 6px;
font-size: 12px;
color: #198754;
display: flex;
align-items: center;
}
.icon_circle_dark {
border-radius: 50%;
border: 1px solid;
padding: 6px 6px;
margin-right: 6px;
font-size: 12px;
color: #000;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="row p-0 m-0" id="pdf" style="font-family: Arial, Helvetica, sans-serif;">
<ul class="connectedSortable left_list mb-0 col-3 pt-4 px-0" id="LEFT" style="background-color: rgb(12, 83,
157); color: white;">
<div class="text-center px-3">
<span class="text-capitalize" id="designation">Box1 Col-3</span>
</div>
</ul>
<ul class="connectedSortable left_list mb-0 col-9 pt-4 px-0 !important" id="LEFT" style="background-color: rgb(201, 204, 37); color: white;">
<div class="text-center px-3">
<span class="text-capitalize" id="designation">Box 2 Col-9</span>
</div>
</ul>
</div>
</body>
</html>
HTML Page output
python3 code to generate pdf
import pdfkit;
options = {
'margin-top' : '.3in',
'margin-bottom' : '1in',
'margin-left' : '.1in',
'margin-right' : '.1in',
}
pdfkit.from_file('pdfTest.html', 'pdfTest.pdf',options=options,verbose=True);
PDF Generation output
Related
I'm a newbie.So, I tried putting CSS cards on a page that has a sidebar. I used Html & CSS flexbox. First I made them separately and they were perfectly fine and responsive. When I tried merging the both in a single page, the cards came in front of the navbar and the page overall loses its responsiveness too, as the cards lose their form. So, how can I fix this issue?
:root{
font-size: 16px;
font-family: 'Courier New', Courier, monospace;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #152238;
--bg-secondary: #141418;
--transition-speed: 600ms;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
color: black;
margin: 0;
padding: 0;
background-color: #bbff99;
background-image: linear-gradient(319deg, #bbff99 0%, #ffec99 37%, #ff9999 100%);
background-size: cover;
}
/* Used to colorize the browser scrollbar*/
body::-webkit-scrollbar{
width: 0.45rem;
}
body::-webkit-scrollbar-track{
background: #1e1e24;
}
body::-webkit-scrollbar-thumb{
background: #6649b8;
}
main{
margin-left: 5rem;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.todima{
position: relative;
top: 5rem;
text-align: center;
}
.navbar{
width: 4.5rem;
height: 100vh;
position: fixed;
background-color: var(--bg-primary);
transition: width 200ms ease;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.logo{
font-weight: bold;
text-transform: uppercase;
margin-top: 1rem;
margin-bottom: 1rem;
text-align: center;
width: 100%;
font-size: 1.5rem;
letter-spacing: 0.3ch;
}
.navbar-item{
width: 100%;
}
.navbar-item:last-child{
margin-top: auto;
}
.nav-link{
display: flex;
align-items: center;
height: 5rem;
color: var(--text-primary);
text-decoration: none;
filter: grayscale(100%) opacity(0.7);
transition: var(--transition-speed);
}
.nav-link:hover{
filter: grayscale(0%) opacity(1);
background: #0a304a;
}
.link-text{
display: none;
margin-left: 0.5rem;
}
.nav-link i{
min-width: 2rem;
margin: 0 1rem;
}
.navbar:hover{
width: 16rem;
}
.navbar:hover .link-text{
display: block;
}
.fas{
color: #F98125;
transition:var(--transition-speed);
}
.a1{
font-family: 'Major Mono Display', monospace;
}
h1{
font-family: 'Pacifico', cursive;
margin: 7px;
margin-left: 12px;
font-size: 36px;
color:#0B1354;
}
p{
margin: 7px;
margin-left: 10px;
font-size: 28px;
font-family: 'Caveat', cursive;
color: #660F56;
}
.cardcont{
background: #FFFAFA;
width: 450px;
margin: 40px;
border-radius: 7px;
perspective: 1px;
overflow: hidden;
border: 8px solid transparent;
}
.cardcont:link {
text-decoration: none;
}
.cardcont:visited {
text-decoration: none;
}
.cardcont:hover{
border-width: 8px;
border-style: outset;
border-left-color: #e975a8;
border-top-color:#e975a8 ;
border-bottom-color: #7ddff8;
border-right-color: #7ddff8;
transition: 0.5s;
}
.container{
position: relative;
top: 5rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.card-image{
height: 200px;
margin-top: 7px;
margin: 6px;
}
.image-1{
background-image: url(dashboardprofile.png);
}
.image-2{
background-image: url(picks.png);
}
.image-3{
background-image: url(http://www.simpleimageresizer.com/_uploads/photos/b5f9c7fc/pexels-suzy-hazelwood-1130980_450x130.jpg);
}
.image-4{
background-image: url(contributor.png);
}
.image-5{
background-image: url(request.png);
}
.image-6{
background-image: url(logout.png);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard withh Cards</title>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> -->
<script src="https://kit.fontawesome.com/7d904839de.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="mergerdraft.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght#600&family=Major+Mono+Display&family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Cuet Course Insights</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-home fa-2x"></i>
<span class="link-text">Home</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-user-circle fa-2x"></i>
<span class="link-text">Profile</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-file-download fa-2x"></i>
<span class="link-text">Download books</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-exclamation-triangle fa-2x"></i>
<span class="link-text">Report an issue</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-sign-out-alt fa-2x"></i>
<span class="link-text">Log Out</span>
</a>
</li>
</ul>
</nav>
<main>
<section class="todima">
<h1 class="a1">Welcome to your dashboard</h1>
<p>Glad to have you here. Hope you make the best use of your time. </p>
</section>
<section class="container">
<a href="dashboard.html" class="cardcont"><div class="card">
<div class="card-image image-1"></div>
<h1>Profile</h1>
<p>Visit your profile and all related information in this tab</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-2"></div>
<h1>Your Picks</h1>
<p>See your specially hand-picked items, without the peril of following all the steps.</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-3"></div>
<h1>Course materials</h1>
<p>Find and read the Books, Previous year Questions, Notes of all the toppers from our vast library of resources. In short, GO FOR GLORY!</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-4"></div>
<h1>Be a Contributor</h1>
<p>Wanna contribute to the community? No one ever regrets it, by helping others who might be in need. Go on!</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-5"></div>
<h1>Request materials</h1>
<p>Click here to reach us. Request content(question papers, books) for any course of any department and we'll hear you out. Just fill up the details.</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-6"></div>
<h1>Log Out</h1>
<p>All done? Then we guess there's nothing holding you back.</p>
</div></a>
</section>
</main>
</body>
</html>
The simplified rule is that elements in the HTML file will be created in the order that they appear. If elements overlap, the newer element would be drawn on top of the older element.
That's the problem here. The navigation gets created, then the main contents gets created. So the main contents gets priority when those overlap.
We can change that behaviour by overwriting the order. We do that via CSS using the z-index property. Items with a higher z-index will be drawn over items with a lower z-index. The usual method is to set the z-index very high (e.g. 10000) so that the element with that z-index would appear above everything else.
The only change is that I've added z-index: 10000; to .navbar:
:root{
font-size: 16px;
font-family: 'Courier New', Courier, monospace;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #152238;
--bg-secondary: #141418;
--transition-speed: 600ms;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
color: black;
margin: 0;
padding: 0;
background-color: #bbff99;
background-image: linear-gradient(319deg, #bbff99 0%, #ffec99 37%, #ff9999 100%);
background-size: cover;
}
/* Used to colorize the browser scrollbar*/
body::-webkit-scrollbar{
width: 0.45rem;
}
body::-webkit-scrollbar-track{
background: #1e1e24;
}
body::-webkit-scrollbar-thumb{
background: #6649b8;
}
main{
margin-left: 5rem;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.todima{
position: relative;
top: 5rem;
text-align: center;
}
.navbar{
width: 4.5rem;
height: 100vh;
position: fixed;
background-color: var(--bg-primary);
transition: width 200ms ease;
z-index: 10000;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.logo{
font-weight: bold;
text-transform: uppercase;
margin-top: 1rem;
margin-bottom: 1rem;
text-align: center;
width: 100%;
font-size: 1.5rem;
letter-spacing: 0.3ch;
}
.navbar-item{
width: 100%;
}
.navbar-item:last-child{
margin-top: auto;
}
.nav-link{
display: flex;
align-items: center;
height: 5rem;
color: var(--text-primary);
text-decoration: none;
filter: grayscale(100%) opacity(0.7);
transition: var(--transition-speed);
}
.nav-link:hover{
filter: grayscale(0%) opacity(1);
background: #0a304a;
}
.link-text{
display: none;
margin-left: 0.5rem;
}
.nav-link i{
min-width: 2rem;
margin: 0 1rem;
}
.navbar:hover{
width: 16rem;
}
.navbar:hover .link-text{
display: block;
}
.fas{
color: #F98125;
transition:var(--transition-speed);
}
.a1{
font-family: 'Major Mono Display', monospace;
}
h1{
font-family: 'Pacifico', cursive;
margin: 7px;
margin-left: 12px;
font-size: 36px;
color:#0B1354;
}
p{
margin: 7px;
margin-left: 10px;
font-size: 28px;
font-family: 'Caveat', cursive;
color: #660F56;
}
.cardcont{
background: #FFFAFA;
width: 450px;
margin: 40px;
border-radius: 7px;
perspective: 1px;
overflow: hidden;
border: 8px solid transparent;
}
.cardcont:link {
text-decoration: none;
}
.cardcont:visited {
text-decoration: none;
}
.cardcont:hover{
border-width: 8px;
border-style: outset;
border-left-color: #e975a8;
border-top-color:#e975a8 ;
border-bottom-color: #7ddff8;
border-right-color: #7ddff8;
transition: 0.5s;
}
.container{
position: relative;
top: 5rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.card-image{
height: 200px;
margin-top: 7px;
margin: 6px;
}
.image-1{
background-image: url(dashboardprofile.png);
}
.image-2{
background-image: url(picks.png);
}
.image-3{
background-image: url(http://www.simpleimageresizer.com/_uploads/photos/b5f9c7fc/pexels-suzy-hazelwood-1130980_450x130.jpg);
}
.image-4{
background-image: url(contributor.png);
}
.image-5{
background-image: url(request.png);
}
.image-6{
background-image: url(logout.png);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard withh Cards</title>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> -->
<script src="https://kit.fontawesome.com/7d904839de.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="mergerdraft.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght#600&family=Major+Mono+Display&family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Cuet Course Insights</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-home fa-2x"></i>
<span class="link-text">Home</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-user-circle fa-2x"></i>
<span class="link-text">Profile</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-file-download fa-2x"></i>
<span class="link-text">Download books</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-exclamation-triangle fa-2x"></i>
<span class="link-text">Report an issue</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-sign-out-alt fa-2x"></i>
<span class="link-text">Log Out</span>
</a>
</li>
</ul>
</nav>
<main>
<section class="todima">
<h1 class="a1">Welcome to your dashboard</h1>
<p>Glad to have you here. Hope you make the best use of your time. </p>
</section>
<section class="container">
<a href="dashboard.html" class="cardcont"><div class="card">
<div class="card-image image-1"></div>
<h1>Profile</h1>
<p>Visit your profile and all related information in this tab</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-2"></div>
<h1>Your Picks</h1>
<p>See your specially hand-picked items, without the peril of following all the steps.</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-3"></div>
<h1>Course materials</h1>
<p>Find and read the Books, Previous year Questions, Notes of all the toppers from our vast library of resources. In short, GO FOR GLORY!</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-4"></div>
<h1>Be a Contributor</h1>
<p>Wanna contribute to the community? No one ever regrets it, by helping others who might be in need. Go on!</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-5"></div>
<h1>Request materials</h1>
<p>Click here to reach us. Request content(question papers, books) for any course of any department and we'll hear you out. Just fill up the details.</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-6"></div>
<h1>Log Out</h1>
<p>All done? Then we guess there's nothing holding you back.</p>
</div></a>
</section>
</main>
</body>
</html>
The second question is about handling different screen sizes. The best way to do that is via CSS media queries. Those allow you to add a set of rules to your CSS file, which will only be processed if they match your condition(s).
For example, if you want to run some rules if the page width is 700px or narrower, you would do this:
#media (max-width: 700px) {
.cardcont {
background-color: black;
}
}
You can have multiple media queries and each one can have multiple conditions. Media queries are usually put at the end of the CSS file, because that allows you to overwrite earlier rules.
I would suggest that you use those to make changes to the page at small sizes. Examples changes would be:
Removing the margin from .cardcont.
Move the navigation to the top of the page.
/// The text I'm referring to is the text inside the transparent caption boxes displayed just below my picture slider(Jquery cycle2). The text seems to adhere to the opacity I've commanded for the box. I'd also like the box to span the width of the slider and the text within it to be centered, but now I'm getting ahead of myself. I would be glad to try any solutions suggested to me. I've also included an example from another website of what Im trying to imitate.
http://sff-law.ca/.
Instead, I've only been able to create the following:
///
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.cycle-slideshow, .cycle-slideshow * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* overlay */
.cycle-overlay {
font-family: Baskerville, Georgia, "Times New Roman", Times, serif;
z-index: 800;
background: black;
color: #FFF;
opacity: .1;
overflow: hidden;
position: absolute;
top: 211px;
font-size: 16px;
font-weight: bold;
right: auto;
left: auto;
clear: both;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 6px;
margin-left: 1px;
font-style: italic;
}
</style>
<script src="jquery.cycle2.caption2.min.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.cycle2.js" type="text/javascript"></script>
</head>
<body background="KAWARTHA LAW/Pics/6a00d83452719d69e2017d41a50bc6970c.jpg">
<div id="back">
<div class="cycle-slideshow"
data-cycle-timeout=2000
>
<!-- empty element for overlay -->
<div class="cycle-overlay"></div>
<img src="Slidding/buying.gif"
data-cycle-title="Contracts"
data-cycle-desc="">
<img src="Slidding/last-will-and-testament-and-glasses.gif"
data-cycle-title="Corporate"
data-cycle-desc="">
<img src="Slidding/last-will.gif"
data-cycle-title="Wills and more wills"
data-cycle-desc="">
<img src="Slidding/Top-5-Reasons-to-have-a-Will-in-PA-02-08-12.gif"
data-cycle-title="Good Wills"
data-cycle-desc="">
</div>
</div>
</body>
</html>
If you only need this for newer browsers you can set the CSS to use an RGBA value, then the text will be opaque (This will work in IE9+, Chrome, Firefox, Safari):
.cycle-overlay{
background-color:(0,0,0,.1);
}
If you need a backwards compatible solution, you can create a 1x1 PNG image with the transparency that you want, and set that as the background.
A simple nested polymer-element inside another one will not display:
index.html
<!DOCTYPE html>
<html>
<head>
<script src="lib/polymer.min.js"></script>
<link rel="import" href="elements/indx-grid.html">
<link rel="import" href="elements/indx-griditem.html">
<title>INDX-polymer</title>
</head>
<body>
<indx-grid>
<indx-griditem></indx-griditem>
</indx-grid>
</body>
</html>
indx-grid.html
<polymer-element name="indx-grid">
<template>
<style>
#host {
:scope {
display: block;
margin: 20px;
border: 2px solid #E60000;
background: #CCC;
height: 500px;
}
}
</style>
</template>
<script>
Polymer('indx-grid');
</script>
</polymer-element>
indx-griditem.html
<polymer-element name="indx-griditem">
<template>
<style>
#host {
:scope {
display: block;
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
background: #FFF;
width: 100px;
height: 100px;
}
}
</style>
</template>
<script>
Polymer('indx-griditem');
</script>
</polymer-element>
Strangely enough, although I can see it in developer tools in Chrome and CSS properties are all correct, the element will not display and not even have a 'size tooltip' while inspecting it with Chrome dev tools.
Does someone have any clue about the problem here?
Thanks
You need <content> 1 to bring in <indx-griditem> ("light DOM") into the <indx-grid>'s shadow DOM.
Demo: http://jsbin.com/eRimiJo/2/edit
Bonus tip: you can also use noscript on Polymer elements that don't setup a prototype (e.g. only call Polymer('element-name');
please help!
I cannot get it working, and i dont understand why.
It a simple code, but it just not working.
I want folder_image.png appear beneath folder.png thats all!
Thanks a lot!!!
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 136px;
height: 201px;
background: url(http://s-ola.me/img/folder.png) no-repeat;
z-index: 2;
position:relative;
}
.folder {
width: 136px;
height: 101px;
background: url(http://s-ola.me/img/folder_image.png) no-repeat;
z-index: 1;
position:relative;
}
.text {
}
</style>
</head>
<body>
<div class="container">
<div class="folder"></div>
<div class="text">text</div>
</div>
</body>
</html>
put this
<div class="folder" style="{z-index: 2};">
and take it out of the CSS
I made this solution but i dont like it. It didnt answered on my question.
<html>
<head>
<style>
#test{z-index:-10; position:relative;}
.container {
width: 136px;
height: 201px;
background: url(http://s-ola.me/img/folder.png) no-repeat;
position: relative;
margin:0 auto;
}
.folder {
width: 136px;
height: 101px;
background: url(http://s-ola.me/img/folder_image.png) no-repeat;
z-index:-1;
position:relative;
}
.text {
margin:0 auto;
position:relative;
margin-left:40px;
}
</style>
</head>
<body>
<div id="test">
<div class="container">
<div class="folder"></div>
<div class="text">text</div>
</div>
</div>
</body>
</html>
I have a website setup with DIV managed layout. The problem is that under IE 6 this layout breaks.
This is the CSS:
#bg{
position:fixed;
top:0;
left:0;
/* Preserve aspect ratio */
min-width:100%;
min-height:100%;
}
#basic {
width: 902px; height: auto; margin-left: auto; margin-right: auto; position: relative; padding-bottom: 50px;
}
#logo{
width: 902px; height: 400px; position: absolute; top: 17px;
}
#navbar{
width: 902px; height: 23px; top: 280px; position:absolute;
}
#content{
width: 802px; height: auto; top: 325px; position: absolute; background-color: white; padding-top: 50px;padding-left: 50px; padding-right: 50px; padding-bottom: 50px
}
#csob{
width: 100px; height:100px; bottom:0px; right: 0px; position: absolute;
}
#titulni_strana {width:902; height:auto; top:325px; position:absolute}
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="shortcut icon" href="http://protechp.cz/zimnihrycsob/images/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<link href="default.css" rel="stylesheet" type="text/css" >
<title>Zimni Hry CSOB</title>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
</head>
<body>
<img src="images/background-gradient-ok.jpg" id="bg" alt="pozadi">
<div id="basic">
<div id="logo">
<center><img src="images/logo3.png" alt="logo"></center>
</div>
<?php include ("./menu.php") ?>
<div id="titulni_strana">
<img src="images/titulni_strana.jpg" alt="titulni strana">
</div>
</div>
</body>
</html>
It look as if there are issues here beyond just simple CSS.
First, ensure your HTML is valid. It looks as if the browser in the first image is being more lenient than IE6 since the image is broken in one but not the other.
Also, IE6 does not support the min-* properties. You need to use height and width instead, either in an IE6-only stylesheet or with the star hack to target IE6 only.
Edit: Also, IE6 does not support fixed positioning. You'll need to use absolute positioning for it instead.
It seems the problem is with the image not loading and not the css.
Try removing the style sheet, all css, and the ie6 png fix javascript just to confirm your image is making it to the page as it doesnt look like a css problem to me. A live example would be nice.