Tables with Firefox and Explorer

[xHitmanx]

This has happened to me a couple of times and i cant figure out the source.

When i write a html table with images in it, no borders, cellpadding/spacing = 0 etc. I view it in explorer and the images are nicely placed together vertically.

But when i try the same page in firefox there is a 1 or 2 px gap between the two images.

Anybody come across this before? I can set up an example if needed.

Andrew

[kent_will]

Yes I have exactly the same problem!!

I have a table of equal width centrered on two pages. On one page is an image in the table the second text. The width of the table dosnt change in Firefox but the table isnt as centred as the second??

Awaiting a reply from anyone who knows!!

[pcthug]

I can set up an example if needed

Please do.

[kent_will]

here's an example:

Goto: http://www.xploit-pixels.co.uk/

flick between the homepage and buy pixels page.

Exactly the same code coz I copy and pasted and replaced the image with text.

[David Harrison]

Well that example appears to be exactly the same in Firefox and IE, however it didn't ever seem to fully load.

In any case, the reason that you sometimes have a few pixels of space under images in Firefox is because of a difference in the way Firefox and IE place images.

Image as if each line of text is in it's own box. The very very bottom of the box (baseline) is where the bottom's of the tails on g's and j's touch. In the box, there's also a line that all of the letters sit on (text-bottom), it's where the bottoms of other letters touch, such as a, b, c etc. Firefox puts images on the text-bottom, whereas IE puts images on the baseline, so those extra few pixels are where the tails of letters go.

You can solve the problem in a number of ways, you can apply vertical-align:baseline; on the container for the images, or apply display:block; to the images themselves. But by far the best way, would be not to use tables for layout.