Fallion
Fallion

Reputation: 79

Internet Explorer 6 - DIV problems

I have a website setup with DIV managed layout. The problem is that under IE 6 this layout breaks. alt text

alt text

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>

Upvotes: 1

Views: 664

Answers (2)

Blowsie
Blowsie

Reputation: 40535

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.

Upvotes: 0

simshaun
simshaun

Reputation: 21466

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.

Upvotes: 1

Related Questions