Internet Explorer 6 CSS bug, margins, padding and how to fix it.

I ran into a bug using the Zeke template for WordPress . Zeke is a very nice 3 column theme by Michael D. Pollock.

There isn’t an easy way to implement 3 columns in CSS and Zeke does it as two, two column groups.

#wrap , 960px wide #contentleft, float left, within #wrap #contentPost (s)float left, within #contentleft #midcontentfloat right,within #contentleft

#rightcontentfloat rightwithin #wrap

The theme was working just fine with FireFox and Internet Explorer 7, but Internet Explorer 6 was not. The middle column, #midcontent, was sliding to left, just enough to cause the Post (s) to slide down below the entire middle column.

There is a well know bug in Internet Explorer 6 in the way it renders content that floats, when it’s contained within floating content. According to this link, IE6 doubles the margins. The Zeke WordPress theme doesn’t use much in the way of margins and the “display: inline;” fix mentioned in the article didn’t work.

I noticed that Zeke does use quite a bit of “padding” and discovered that IE6 was indeed getting the padding wrong.

According to this website (and others) it is possible to have CSS tags that IE6 processes and other browsers ignore, just by placing a _ in front of the tags. I was able to copy the “padding” line for #midcontent and create a new line that only IE6 would process, without the padding on the right.

Edited to add: You need both padding: and the _padding: lines in your #midcontent section.

See the code below:

#wrap {
padding: 0 5px;
clear: both;
width: 960px;
margin: 0 auto;
#contentleft {
width: 680px;
float:left;
padding: 0;
margin: 0;
}
#content {
width: 499px;
float: left;
margin: 0 1px 0 0;
padding: 0;
}
#midcontent {
width: 160px;
float: right;
margin: 0;
padding: 10px 10px 15px 0;
_padding: 10px 0px 15px 0; /* this did the trick. Only IE6 should process this line */
}
#contentright {
width: 250px;
float: left;
padding: 15px 0 15px 15px;
margin: 0;
}

Now, everything is working great!