Why <td > height not equal to <img > height inside of it when DOCTYPE is XHTML 1.0 Strict?

html html-table doctype

11,310

Solution 1

Note: this probably depends on the browser.
The size of block-level element (td, div, etc) if not specified will only be as big as needed, according to the space taken by its content. If specified, it will try to expand accordingly, except if the content is bigger, in which case it will expand as necessary.

In your example, the cell contains a single character (the non-breaking space), which take the size of single line. Hence, the block element must be at least 1 line-height high; it can't assume any smaller size. This is why your height declaration was ignored.

You may want to use this style:

line-height: 1px;

This sets the line-height to 1px. Line-height is not an element, so the above rule doesn't apply.

Solution 2

Add a style block with this rule

td img {display: block;}

and see https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps for a full explanation.

11,310

Author by

omg

Updated on June 22, 2022

Comments

omg almost 2 years

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
</head>
<body>

<table width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td align="right" colspan="5">
            <span class="validationInline">*</span> 
            <span class="hint">Required fields</span>
        </td>
    </tr>
    <tr>
        <td colspan="5" background="http://media.monster.com.hk/bgr_8.gif">
            <img src="/static/cleardot.gif" height="1" width="1" />
        </td>
    </tr>
</table>

</body>
</html>

Can check it out here: http://maishudi.com/tt2.html

I've known it's caused by DOCTYPE ,because deleting that part will make it normal:

http://maishudi.com/tt.html

So what's wrong?How can I make it work with the DOCTYPE ?

omg over 14 years

Works like charm! But can you explain why height has no effect on td?
Ólafur Waage over 14 years

It's based on browsers also. Some browsers expect text content within elements. This can also happen with divs.
Mentalist almost 2 years

The link is dead. Now the gaps are forever mysterious.
Alohci almost 2 years

@Mentalist - Thankfully, we have the Wayback Machine. Link amended.