Welcome to WebmasterWorld Guest from 54.234.38.8

Forum Moderators: incrediBILL

Message Too Old, No Replies

Table cell

Space at bottom when doctype added

     
7:24 pm on Oct 18, 2011 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 1, 2005
posts:369
votes: 0


For purpose of example I've got a single cell table (the actual table is bigger) with a picture in it. And when I add the doctype code, space is added to the bottom of the cell. I think adding the doctype code is a good idea but I don't want the space at the bottom.

How do I remove the space?

Help!

Below are two sets of code. They're both the same except the second one has the doctype added and this creates a space at the bottom of the cell.

This code produces the desired result.

<html>
<head>

<title>
Test
</title>

<style type="text/css">
td
{
border-style: solid;
border-width: 3px;
}
</style>

</head>

<body>

<table>
<tr>
<td>
<img src="test.jpg">
</td>
</tr>
</table>

</body>
</html>

And this code puts space at the bottom of the cell.

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<title>
Test
</title>

<style type="text/css">
td
{
border-style: solid;
border-width: 3px;
}
</style>

</head>


<body>

<table>
<tr>
<td>
<img src="test.jpg">
</td>
</tr>
</table>

</body>
</html>
8:24 pm on Oct 18, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


The doctype puts the document into standards mode instead of quirks mode, so the <img> (an inline element) is automatically aligned to the text baseline of the table cell instead of the bottom. That positioning leaves the extra space below for the "descenders" that fonts need for some letters.

Here's a post that goes more into detail: Quirks Mode vs. Standards Mode - overview [webmasterworld.com] - see the third post in the thread.

This extra CSS will do the trick by creating a special class for table cells that need to hold an image.

td.imgholder img {
display:block;
margin:0;
padding:0;
}
1:23 am on Oct 21, 2011 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 1, 2005
posts:369
votes: 0


Thanks tedster. That did the trick in fine style. Accolades and kudos to you.