IE Leaves a Gap Between Images (Fix)

Some of you may have noticed in Internet Explorer 6 or 7 that it can sometimes leave an unwanted gap around some of your images. This also means that IE will leave a gap between the image and any borders applied to it, which can be frustrating for those of us (hopefully most of us) who don’t settle for a “the client probably won’t notice” attitude.

IE7 / Firefox Comparison

Notice in the image below how IE7 (and IE6) adds a gap in between the image and the element beneath it, whereas Firefox (end any other half decent browser) does not.

The Cause

This is generally caused by line breaks in your code such as the following:

<div id="sidebar">
<a href="event.php">
<img alt="View Upcoming Shows" src="image/cta-upcoming-show.jpg">
</a>
</div>
<!-- some other element here -->


The Cure

But we don’t want to put those 3 lines of code on one line now do we! We want to keep our code nice and readable. So all we need to do is add one tiny piece of CSS to our stylesheet:

#sidebar img {
display: block;
}

There we have it! No more strange gaps around images in Internet Explorer. Here how it now looks in the unholy Internet Explorer:

Ok you got me, that was just the Firefox image from before with the IE logo layered over it! But it does work, trust me