Table row height problem

harvs899 · 10-21-2012, 04:53 PM

Ok basically I have a table with multiple rows, and two images inside a table data element per row, I am using these images as thumbnails you can click on to bring up the larger image, now the thumbnail size I'm using is 100x100, yet my table row height is permanently at 103.36px (according to IE developer tools) which is very odd, so there is a space at the bottom of the image between that and the border, I have tried EVERYTHING I can think off, I have commented out my whole CSS file just leaving the rules for the table and I still have these gaps, I have double even triple checked my html for problems and I can't find any

One very odd thing; when I move the <link href="css/stylesheet.css" type="text/css" rel="stylesheet" /> element from the head to the very very top of my html file (above the DOCTYPE) these gaps disappear and one or two items on the page change position slightly

An album of pictures to explaining my problem, from them you can see that this is mad: http://www.sendspace.com/filegroup/o...t9Yl9b6O4Z%2FA

Thanks in advance

coothead · 10-21-2012, 06:08 PM

Hi there harvs899,

and a warm welcome to these forums.

Without a link or the code to help us, we can only guess at solutions.

My guess, would be to add this...

Code:

img {
    display:block;
 }

...to your style sheet.

coothead

harvs899 · 10-21-2012, 06:34 PM

Oh my god, you beautiful person. It works! Thank you! Why was the fact it was being displayed as an inline (I assume) the problem?

coothead · 10-21-2012, 07:00 PM

Hi there harvs899,

the "img element" is an "inline element", which means that it has text characteristics .

The gap below is therefore dependent on the font size.

Setting it to "display:block" is one of a few methods to remove it.

Perhaps one of these links may help.....

coothead