Space inserted below images in NN6.2

[Bananas524]

Hi,

I have a table with 3 rows, 3 columns. The corner columns span all 3 rows, and there is a picture in each. When I test in NN6.2, space appears below each of the images, apparently stretching the table. There is nothing in any of the other cells, and the cell widths and heights are assigned using css. Does anyone have any idea why this could be happening, as it doesn't happen in IE6, NN7, or Opera?

Bananas524

[TGecho]

Check for whitespace in your code. That includes carriage returns.

[Bananas524]

Whitespace? I'm not using a <pre> tag or anything. Why should that matter?

Bananas524

[TGecho]

Browsers are buggy ;)

[ergophobe]

Yup - ancient, persistent and stupid Netscape bug. I don't think I ever see it with Mozilla or Firebird, so I would think NS7+ would be okay too. IE and Opera should be fine as well.

Tom

[Bananas524]

Know what...it is a bug. And the best way around it seems to be using the style:

img {
display: block
}

on whatever cell the image is in.

Thanks,
Bananas524

[jetboy_70]

Not a bug. Actually implemented deliberately based upon an interpretation of the CSS specs. Admittedly an interpretation that none of the other browser manufacturers seem to share, but an interpretation nonetheless. :)

[asquithea]

The Netscape interpretation is the correct one. Images are inline elements, and as such sit on the text baseline. That means that there will be a space below the image (where the tail on letters hang down), and also a space above if the image is smaller than the text ascent.

There are four fixes:

1) Ensure that the browser is rendering in quirks mode. I've never tested this version of Netscape, but most browsers use the more conventional "shrink wrapping" behaviour when in quirks mode, even though it is incorrect.

2) Make the image a block element. This works well so long as there is nothing else sharing the block.

3) Align the image to the top or middle, thus pulling it off the baseline and changing the calculation of line height.

4) Don't use tables for layout. This last point is frequently the point at which this problem is encountered, and an excellent illustration of why it's a bad idea. Of course, it's possible that you were using tables for entirely semantically legitimate reasons, but by your description I have my doubts.

For your information, the CSS 2.1 specification [w3.org] and an explanation of the problem [devedge.netscape.com].