CSS Not displayinf correctly in IE6 but fine in FF/IE7

edd1e · 12 Sep 2007 at 13:58

Sorry for the new thread but this is a totally different problem.

I have my template working fine in IE 7 and Firefox but it does not work correctly in IE6. heres *** i mean:

FireFox:

IE6

Heres the code:

CSS:

Code:

body {
text-align: center; /* center's things in pre IE6 */
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

#container {
margin: auto;
padding: 0px;
width: 579px;
height: auto;
text-align: left;
background-color: #CCCCCC;
}

#navbar {
width: 579px;
height: 35px;
padding: 0px;
margin: 0px;
}

#header_image {
width: auto;
background-color: #009999;
height: 35px;
padding: 0px;
margin: 0px;
}

#latest_news {
width: auto;
background-color: #009999;
height: 35px;
min-height: 35px;
padding: 0px;
margin: 0px;
}

#news_container {
width: 579px;
height: auto;
min-height: 80px;
overflow: hidden;
text-align: left;
}

#news_left {
float: left;
width: 23px;
margin: 0px;
background-color: #000099;
padding: 0px;
min-height: 80px;
height: auto;
padding-bottom: 32767px;
margin-bottom: -32767px;
}

#news_right {
float: right;
width: 21px;
background-color: #000099;
margin: 0px;
padding: 0px;
min-height: 80px;
height: auto;
padding-bottom: 32767px;
margin-bottom: -32767px;
}

#news_center {
float: left;
width: 535px;
margin-left: 23px;
margin-right: 21px;
background-color: #333333;
min-height: 80px;
height: auto;
padding: 0px;
margin: 0px;
padding-bottom: 32767px;
margin-bottom: -32767px;
}

#news_bottom {
width: 579px;
background-color: #009999;
height: 35px;
min-height: 35px;
padding: 0px;
margin: 0px;
}

#footer {
clear: both;
background-color: #333333;
padding: 0px;
margin: 0px;
}

HTML:

Code:

<!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>
<link href="style3.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="container">

<div id="navbar"></div>

<div id="header_image"></div>

<div id="latest_news"></div>

<!-- start 3 columns -->

<div id="news_container">

<div id="news_left">blah blah blah blah blah blah blah blah blah blah blah</div>

<div id="news_center">blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div>

<div id="news_right">lllllljkjiivilll bbvu ufuf uf uyf uyf u fuf uy</div>

</div> <!-- news container -->

<div id="news_bottom"></div>


<div id="footer">footer</div>

</div>

</body>
</html>

Cheers

Sic · 12 Sep 2007 at 19:27

your page is too wide - in IE6 (and I thought IE7, too), margin and padding count towards the total width of the page. try increasing the width of your container

CSS Not displayinf correctly in IE6 but fine in FF/IE7

edd1e

edd1e

Sic

Sic