I am trying to redesign a site with xhtml, but am getting a whitespace of about 2px at the bottom on my table cells. This happens ONLY in Mozilla. Does anyone know why?
Here is the page:
http://milo.usu.edu/biotech/header/index.html
I had the same problem and found the solution on google groups.
Check out this link for the long answer:
http://www.hut.fi/u/hsivonen/standards.html#img-display-block
In short, use this in your stylesheet (or create a seperate class to handle the specific situation that is causing your problem):
img
{
display:block;
border:none;
padding:0px;
margin:0px;
}
Hi,
Should have looked on sitepoint first as I’ve answered this question hundreds of times in the css forum 
Hmm that article doesn’t seem to adress the correct reason (unless I missed it when I read quickly through it 
).
Images are treated the same as text by some browsers (and depending on doctype mode etc). What this means is that an image will sit on the baseline (not the bottom) exactly the same as text does and will allow room underneath for descenders in the text.
Setting the image to display block will solve the problem or setting the image to vertical-align:bottom if other content is n the cell and display:block can’t be used.
Hope that helps.
Paul
This page has always helped me understand the mysterious gaps:
http://devedge.netscape.com/viewsource/2002/img-table/
William