<br />

[kevin_m]

Hi - This probably just a stupid oversite by me. But can anyone explain this. I have these images one on top of each other in a table cell with this code. In IE and oddly enough NS4 it looks great. In NS6 however it adds space around the images. So the 7 pixel spacer looks more like 14 pixels. I am noticing this on other areas of the site, but I figure if I can solve this I'll tackle the rest.

<img src="images/spacer.gif" width="134" height="7" border="0" alt="" /><br />
<a href="something"><img src="images/mainnav_1.gif" alt="" width="140" height="18" border="0" /></a><br />
<img src="images/spacer.gif" width="134" height="7" border="0" alt="" /><br />
<a href="something"><img src="images/mainnav_2.gif" alt="" width="140" height="18" border="0" /></a><br />
<img src="images/spacer.gif" width="134" height="7" border="0" alt="" /><br />

[DrDoc]

There are two things you can do.

1) Since the navigation images are both 140 pixels wide, make the spacer image 140 pixels wide too ..

2) If that doesn't solve the problem (which depends on the rest of the code on the page) there is a very simple solution .. Simply put all the code on the same line ..

3) Since making long lines isn't the best solution to anything .. Why don't you remove spacer.gif, and replace it with text (a &nbsp; ) or a DIV 7 pixels high?

[kevin_m]

thanks DrDoc,

I tried the first one, no luck.

Could you explain how I could seperate the images with a 7 pixel high div? Your right putting everything on the same line isn't the best solution.

Thanks again.

[madcat]

I'm not sure I can help you on this, but if you haven't fixed it yet its worth a shot...put this style in each image tag.

<img style="display: block;" src="images/mainnav_1.gif" alt="" width="140" height="18" border="0" />

Your problem sounds close to a problem I had a while back, only thing is this was a 3 pixel wide gap not 7?

--

[moonbiter]

The reason for the gap is that images are inline elements, and the gap is created by the line-height of the text that is supposed to go into the table cell (even if there is no text in the box at all!). Since the default alignment for an inline image is the *baseline* of the text, it leaves a gap at the bottom of the image where the descender space of the font should be.

The display: block declaration should work for your purposes, but remember to take out your line breaks (they'll just add additional space once you declare the display value).

(edited by: moonbiter at 10:53 pm (utc) on May 1, 2002)

[kevin_m]

madcat that did it Thanks!

But then caused another problem. A layer I have on the top of at page is rendering at the bottom in NS4. But the spacing issue got fixed. So I should be able to troubleshoot the layer thing.