Posted by Jmz in Here’s a rather quick css tutorial, but in my opinion, a rather important one. Have you ever noticed when you code a website that uses floating div’s that IE6 does some really weird things with the margin widths?
I’ve came across this before, normally you can get away with a few extra pixels without having to worry, but when you’re coding sites that have large margins on a floating div it can really get messy. Anyway I decided enough was enough, I wasn’t going to leave it, I fiddled around for an hour or two with my CSS file and finally I came up with the reason IE6 doubles the margin on a floating div and that reason is…..(drum roll..)….there is no reason, it shouldn’t do it, it can only be described as a bug!
The Fix
Now to the important part, how to fix the weird margin problem in IE6, and the fix is just as weird as the problem you simply add:
Into the CSS code for the floating element.
Again there’s no reason why this should happen, it’s just one of those things!
I find if you use this technique with the essential css code from my other tutorial I can quickly create layouts that are very, very cross browser compatible.
Cheers for that :) Something I’ve been having to use a lot lately. More that know about this the better.
IE has too many bugs.
Hope Opera win the battle against IE this time.
I have to say this - why don’t you give us an example of this weird margin problem you are trying to correct, with code that goes wrong, and then how you correct it. Cos at present I have no idea what you are trying to sort.
That solved my problem. I was surprised that someone had the exact situation as I did (floating divs having 2x the margin size in IE6) and even more surprised that it only took a simple display:inline to correct. Thanks ;)
Yes that solves the problem thanks for the tip…
thanks, solved my ie6 problem - floats shifting to the right but tables in the right place - this is so simple its stupid! Now my site works on ALL browsers thank goodness.
Bradzzzz
Just had to say thanks, had the same issue trying to make a site cross browser compatible and as usual IE6 had the only one little quirk that messed it up. Your tip fixed it in a couple of seconds! Excellent!
Just wanted to join the chorus of thanks. This fixed a problem which has been vexing me for a week.
Thank you very much for this fix. It helped me well. ;)