PDA

View Full Version : firefox cell height problem, its showing extra space



chris_angell
May 3rd, 2007, 09:28 AM
Hi i am using firefox and trying to make a cell the height of the image.. sounds easy BUT.... its not working... it should be easy..

MY DOCTYPE IS ....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

i have change the cell height and taken all padding off etc but nothing..

http://preview.globalwebcity.com/_chris/work/moocow/v2/test.asp

if you look at this link in both browsers (firefox and internet exlorer) you will see the difference... i need it to look like it does in internet explorer.. ?? but making the cell a certain height or callaping the cell isn't working ??? i have added a green background just so you can see the sixe of the cell and see the extra space..

any help would be good...

_Aerospace_Eng_
May 3rd, 2007, 09:39 AM
Hmm if I was you I wouldn't use an XHTML doctype just yet as it seems that you haven't mastered HTML completely just yet. The problem you are having is the image contains a line height. You have 2 solutions. Add this to your CSS

td img {
display:block;
}
or remove the font size and line height from the td cell.

td {font-size:0;line-height:0;}
Note: both the examples above will effect ALL td cells so you may want to add a class or id to that td cell though even using a table isn't necessary. Read this: Why Tables for Layout is Stupid? (http://www.hotdesign.com/seybold/).

VIPStephan
May 3rd, 2007, 09:41 AM
Actually Firefox shows the correct and intended behavior. This is a frequently asked question and is answered here: http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps