breakthrough design

Problem:

You are building your navigation, or template design and for some crazy reason the images (with a font-size:0px) still continue to have a 1px gap between each other in ie (Internet Explorer 6 – 7 particularly).

BIG SURPRISE – another ie bug.  Wow. what a shocker.

Solution/Workaround 1 – Remove line breaks

In many cases, the problem actually lies in IE’s rendering of your html code.  If you have line breaks in between your images, that will for some reason translate to a 1px gap.  So one possible solution is to remove the line breaks giving your something like:
<a href="home"><img alt="" /></a><a href="contact"><img alt="" /></a>
...

Solution 2 – Float that junk

We’ve also found that floating the images will close the gap between images in ie.  So in your style sheet:

<style>
a img {float:left}
</style>

Solution 3: (Gaps below your imgs) – Font-size:0px

A separate issue that you may be having is that images will automatically come preset with a small gap on the bottom (which I believe is reserved for image captions, or alignment within text, etc).  To close this gap:

<style>
a img {font-size:0px}
</style>

Solution 4: Become a White Water Rafting Guide

http://www.salary.com/careers/layouthtmls/crel_display_Cat10_Ser196_Par294.html

Related Image Gap References

• Closing the gap between list items in IE

Tags: ie bug, Internet Explorer

This entry was posted on Monday, June 1st, 2009 at 9:48 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.