CSS Internet Explorer Bugs

The other day I ran in to a bug in IE 6 that I had never encountered before. I had a left-floated content box with a margin of 105px on the left. Everything worked fine in the good browsers as usual, but when I checked IE 6, I noticed that the margin was off. No real surprise there. Upon further inspection, I noticed that the margin was more than just off, it was exactly double the actual margin.

After doing some research, I discovered that the bug has been well documented as the “Doubled Float-Margin Bug.” Position Is Everything has a good explanation:

This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any following floats with a similar margin won’t show the doubled margin. Only the first float in any given float row will suffer from the bug. Also, the doubled margin displays symmetry, working the same way to the right as it does to the left.

As it turns out, I didn’t even need to use their recommended fix for the bug. I was able to ax it by just adjusting which elements had the float and margins.

Position Is Everything also contains an entire section IE only bugs. I know this is going to be an invaluable reference for me when I’m trying to track down odd behavior that I’m sure is a bug and need an easy fix.

You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.



appointive
appointive
appointive
appointive