Gabs in layout when using pictures

Question

Im having a problem with images in tablecells creating a small gab under them.
The problem only show in FireFox and netscape .. not in Safari or Opera (Dont know about IE)
http://home19.inet.tele.dk/jgom/test/test/index.html (the two images has a gab between them in ff)
http://home19.inet.tele.dk/jgom/test/test/index2.html (the two images dont have a gab between them here)
The problem comes if i have more than an image in the cell (eg. text) not if i only have an image.
Comparing the the page in FF and safari it looks like FF is putting a extra px in both top and bottom of the cell
I have tryd to set the image display to both bloc inline-blok inline ,,, without luck.
Anny ideers ???

Answer 1

Hi murray
Today i tested in FF on a pc at work.. the problem was the same
I also tryde removing the text and like you the gab is gone,
I then playd a little with the style sheet and found out what makes the problem. for both ff and opera,
Its the line hight.! I think FF and Opera has an rendering problem here ?? (a bug?)
in the stylsheet i have
html, body {
color: #000000; font-size: 11px; line-height: 1.3em;
changeing the linehight to 1.25 or 1.35 make the gab disaper
Linehight at 1.1 - 1.2 - 1.3 and 1.4 gives gabs
Linehight at 1.15 - 1.25 - 1.35 and 1.45 gives no gabs gabs
Look at the math font-size x line-hieght (Bold givs gabs)
11 x 1.15 = 11.55
11 x 1.1 = 12.1
11 x 1.15 = 12.65
11 x 1.2 = 13.2
11 x 1.25 = 13.75
11 x 1.3 = 14.3
11 x 1.35 = 14.85
11 x 1.4 = 15.4
11 x 1.45 = 15.95
11 x 1.5 = 16.5
11 x 1.55 = 17.05
11 x 1.5 = 17.6
11 x 1.65 = 18.15
An so on..
Its like when the result is >0 or <0.5 FF and Opera ads an extra pixel to "compensate" for 1/2 pixel ?
If i change the em to eg 12.1px or 13.45px it gives gabs
But no gabs with 13.51px linehight