Images not lining up right in IE? If it appears that there is a mysterious margin in IE even when your margins are set to “0″, you’re probably affected by this. Internet Explorer treats whitespace as significant inside of anchors.
Consider the following example:
<div style="border: 1px solid black; width: 200px;"> <p style="float: left; margin: 0;">This is some text</p> <a style="float: right; " href="#"> <img src="x.png" /> </a> <div style="clear: both;"></div> </div>
And the resulting rendering in Internet Explorer 7 and Firefox
If the whitespace surrounding the <img> element is removed, IE places the item in the same place as Firefox!
So, next time you find a mysterious extra margin showing up in IE, remember this tip.
P.S. Sometimes it is undesirable to remove the whitespace formatting. Another workaround is to apply the style “font-size: 0px” to the anchor element.
Enjoy this article?
Consider subscribing to our RSS feed!