I’m not sure if this has ever been posted before, but I’ve seen a lot of FF vs IE threads here the past few weeks, so I thought I’d mention how I’ve solved some IE gap issues that I’ve run into.
Sometimes a gap can be caused in IE because of the spacing in the XHTML code, and not the CSS. For example, code like this…
<div id="ad2">
<img src="adtemps/leaderboard.gif" />
</div>
…will generate a gap under the image, like in figure 1 (see first attached image).
However, if the whitespace in the code is removed, like this…
<div id="ad2"><img src="adtemps/leaderboard.gif" /></div>
…the gap will be removed, like in figure 2 (see second attached image).
Correct me if I’m wrong, but I thought whitespace shouldn’t matter, (especially considering that both sets of code generate the same results in Firefox).
Another trick I learned for fighting IE gaps, is that when you have an empty div, which might be used for a line break or something, like this…
<div class="bloghr" align="center"></div>
…sometimes IE will put in some extra space. To remove the space, you have to put something between the div tags. But what if you don’t want to have anything rendered? Just use an HTML comment, like this…
<div class="bloghr" align="center"><!-- --></div>
Hope that clears up some issues some of you might be having!
