Welcome to WebmasterWorld Guest from 54.221.49.52

Forum Moderators: incrediBILL

Message Too Old, No Replies

Table cell

Space at bottom when doctype added

     

Adam5000

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

10+ Year Member



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>

tedster

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

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



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;
}

Adam5000

1:23 am on Oct 21, 2011 (gmt 0)

10+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month