CSS Layout problems in IE6

[jchavez12]

Hello,

I’ve just created my first CSS website in Dreamweaver. I’m having some problems with my layout in IE6, that doesn’t occur in IE7, 8, or safari, etc. I think it might have something to do with my margins. Seems a certain div is getting pushed down creating a giant empty space in my layout. Every time I try to fix it, it messes up with the other browsers. Any help would be greatly appreciated.

Example Page Link:http://www.jeunique.com/newsite/EN/pages/skincare/cleansers_1.html

Here is a link to the complete CSS code: http://www.jeunique.com/newsite/CSS/main.css

I believe within this particular CSS portion is the problem:

Code:

}
.twoColFixLtHdr #sidebar1 {
float: left;
width: 115px;
height: 500px;
padding-top: 31px;
padding-left: 15px;
margin-top: auto;
margin-bottom: auto;
}
.twoColFixLtHdr #mainContent {
padding-left: 5px;
margin-top: 20px;
padding-top: 0px;
margin-left: 155px;
padding-right: 5px;
}

[Makeshift]

I don’t think IE6 supports auto margins.

[vincent]

Can you post an image of what it looks like in IE6? I don’t have an IE6 I could look at.

If you are able to fix it in IE6, just use a conditional statement to add another style sheet if the user has IE6. Make sure you put !important in each of the CSS rules:

Example:
body {font-size:12px !important;}

IE6 conditional statement that you put in your head section:
<!–[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]–>

Where ie6.css is a CSS file you create that has the code that fixes the problem in IE6. If the user doesn’t have IE6, that file won’t be called and they will view the website as it displays without ie6.css.

[Author]

Posts