IE6: floating or box model bug?

HTML & CSS
1

hi wisers,

I’ve just made a wordpress theme change for a site at http://www.davidtan.org and it looks fine in most new browsers but one of the sidebar is “out of place” in IE6.

help appreciated, thanks.

2

My firefox keeps crashing whenever I load your page, so I can’t really debug. But before my firefox started crashing I got some debugging time in. You have right floated elements inside of a parent that is left floated. IE will st retch that to 100% width and won’t let any more elements sit next to it.

Change the inner elements to all be the same float direction :). Before FF started crapping on me, I did .content, .content*{float:left!important} to test out my theory, and IE behaved after that (I also added a reset to make things easier)

Also I’d count up your math for the columns, it’s 1px too wide because of the border you set on .content I believe (or Content, one of the columns :p)

3

just checked and saw the same “bug” is appearing in ie7 as well. looks fine in ie8 though…

4

Thanks for your advice. I’ve made the changes, but am still seeing the same error in ie6. Did I miss something?

5

Hi,
It looks like you have run into the “Double Margin Float Bug” in IE6.
You have a left margin on a left float that is joining the parent container.
The fix is display:inline; along with the float. Good browsers will ignore it since the float carries more weight.

[COLOR=Blue].sidebar[/COLOR], .sidebar2 { 
margin: 10px [COLOR=Blue]15px[/COLOR]; 
width: 160px; 
overflow: hidden; 
line-height: 16px;
}
[COLOR=Blue].sidebar[/COLOR] { 
float:left; 
[COLOR=Blue]display:inline;[/COLOR]/*fix ie6 margin bug*/
}