White space between pics in divs in FF3

[ornette]

Hello again,

I have placed two images in the same div with links to a larger version of the image.

It works fine in all the major browsers except Firefox3 (Unfortunately I can't run 2 alongside 3, but my client has previewed it in FF2 and hasn't mentioned the problem, so it may not appear in FF2).

In FF3 there is a white band between the images. If this is going to be an ongoing problem with FF3, it would be handy to know how to get rid of the white band.

Any ideas please.

http://www.frank.uk.com/html/pages/i...dex_drink.html

Thanks again

[jantheman]

In Firefox 2 there is a small white gap between the top and bottom pic, is that what you mean? Should they be flush?

[ornette]

Yes, in the other browsers they are flush and that is how I want them in FF

[AutisticCuckoo]

It's the same in Opera 9.5, and that's the correct rendering. Any browser that doesn't show a gap is not CSS-compliant.

Images are (replaced) inline elements and partake in what's known as an inline formatting context. One aspect of this is the vertical alignment of the inline box within the surrounding line box.

The initial value for the vertical-align property is baseline. In the case of an image, which doesn't have a baseline, that means the bottom edge of the image is aligned with the baseline of the line box. The baseline is a few pixels above the bottom of the line box, to leave room for the descenders of lowercase letters like 'g'.

That's why you get the gap.

To remove the gap, you should align the image with the bottom of the line box by using vertical-align:bottom.

[ornette]

Thanks Tommy. I've put it in my notebook for next time.

[jantheman]

Me too, I didn't know that either. Thanks.