Images not lining up in Netscape. (I know, a class "101" Q)

[suzanne]

Hi, I know there must be an easy answer, but I've done a few googles and pulled up all kinds of disparate links, so I thought I'd tap into the knowledge banks here to see if I could get some help.

I.E. and Netscape handle images a bit differently, and I can't seem to get images to line up right next to each other in Netscape if they are in different table cells. What is the right way to do this?

Thanks for your help.

[korkus2000]

have you tried

<style>
img {
margin:0px;
padding:0px;
}
</style>

[Nick_W]

Hi Korkus!

I think our friend may find this a little better:

td img {
  display: block;
}

Nick

[jatar_k]

you could also try the old "all on one line" principal. As long as the cellpadding and cellspacing are both set to 0 and within the td everything is on the same line ie.

<td><img></td> or <td><img><img><img></td>

they should line up just fine.

for some reason in NN if you put them on seperate lines they have a hair's width of space in between.

[suzanne]

thank you guys - I will experiment with them all.

: )

[rewboss]

It's whitespace between the <img> tag and the closing </td> tag. You don't have to put the whole <td>...</td> on one line:

<tr>
<td>
<img></td>
</tr>

works fine. For some reason, Netscape browsers will render the whitespace at that point, even though it's not supposed to: it's a misfeature (not sure if it's a bug as such).

A similar misfeature occurs in <a> tags. If you write this:

<a href="...">
Text
</a>

Netscape will insert a space after "Text" and make it part of the link. The effect is even uglier when the link is an image:

<a href="...">
<img>
</a>

Netscape will display the image, and right next to it a clickable underscore character. The fix is the same:

<a href="...">
Text</a>

and

<a href="...">
<img></a>

[Nick_W]

If we're talking about NS6+ though, this is an FAQ. The way standards compliant browsers treat images in td is as inline elements and all inline elements are given a little space.

Nick

[suzanne]

hmmm. I would like to ensure the white space is removed in all the recent versions of netscape, including 6+. What is the best way to ensure this? Also, if you can recommend any sites/sources I can refer to when developing netscape compliant HTML, that'd be great.

[Nick_W]

Hi Suzzanne

There are two ways of dealing with the problem in modern browsers.

• Layout without tables (by far the best)
  
• Use: td img {display: block}
  

As for older NN versions the above examples are all relevant.

Have you tried the css? It's the standard way of handling it...

Nick

[Crescendo]

The "td img {display:block;}" trick has helped me, but it is only needed when writing XHTML documents. Suzanne, does your page have a DTD at the top for XHTML or HTML?

The following article by Eric Meyer is useful in explaining why images can have gaps next to them:

[developer.netscape.com ]

Hope this helps.

[tedster]

Thanks for the reference, Crescendo, a nicely written article from Meyer. It's also good to know that CSS-3 will address things more completely.