This fix has been around for a while, but I definitely think it is worth making an article for this as it still annoys me to this day, and I'm sure it will annoy other developers too.
In Internet Explorer 6, there is a very weird bug when applying a margin: css value to a float: div. The bug makes IE6 render the margin to the wrong size that you specify in the stylesheet. So for example, a margin:0 0 20px; may actually add a margin height of 26px instead of the specified 20px or similar. This only occurs in IE6 and no other browsers (including IE7) seem to have this bug.
This is very simple to fix though, all you need to do is add the following to your style block:
display:inline;
And that's it, the margin will render to the amount of pixels you actually specify, easy!
Post a Comment