homepage Welcome to WebmasterWorld Guest from 54.167.75.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Table cell
Space at bottom when doctype added
Adam5000




msg:4376134
 7:24 pm on Oct 18, 2011 (gmt 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>

 

tedster




msg:4376174
 8:24 pm on Oct 18, 2011 (gmt 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;
}

Adam5000




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved