Tuesday, June 26, 2007

IE6 double margin bug

Bug: Apply a 'margin-left' to a 'float:left' element. The margin doubles in IE6.
Solution:
http://www.positioniseverything.net/explorer/doubled-margin.html

Basically you add a 'display:inline' to your style.

My concern was - I had applied a 'display:block' declaration to that element earlier - won't making it inline screw up the element behaviour? Well, it doesn't. As per the same article.

"Those who are familiar with the specs on floats are aware that floats automatically become "block" elements, no matter what they were before becoming floats... That means that {display: inline;} on a float should be ignored, and indeed all browsers show no changes in the float when this is done, including IE."

Alternatively, you can use conditional comments, which for some reason are not working for me right now! (Found out why they don't work: conditional comments have not been implemented in CSS syntax - and thus can't be in an external file: they have to be used on the page where they have to apply). Link