Strange 3px added to table td height when using strict DTD

[russ_e]

Below is a composite screenshot of part of a borderless table with 5px padding, a 30px-high logo gif, and the tds being styled as vertical-align:top. With a transitional DTD (html4.01 or xhtml) I get what is intended. With a strict DTD (whether html4.01 or xhtml), an extra 3px is added to the overall height of the table/td, the extra 3px being added at the bottom:



The html code used is identical and conformant in both cases. When viewed in IE compatibility mode, the strict markup appearance renders the same as the transitional markup. However, the added 3px does not appear to be an IE8-specific or IE-specific bug, and shows up in other browsers, tested on browsershots.org. (Btw, the presence or absence of the blackshade background gif used in the table does not affect the issue, and as far as I can tell, there is nothing else in the table that would affect its rendered height.)

I feel there must be a simple explanation for the difference in rendering, but it's got me stumped at the moment.

[jscheuer1]

In the strict DTD, since img tags are natively display: inline (like span or a tags), the logic (which I never really fully understood) goes that, like these other tags, there must be allotted room for for letters that go below the line, like p, g, q, j, some others perhaps, depending upon the font.

Often this is dealt with by making the image(s) in question display: block. But this will introduce a line break. So then the image is often floated left or right to compensate for that (ex - float: left;).

I've also found that using instead of display: block; and a float, you can often get by setting the img tags' vertical align, ex:

img {
vertical-align: top;
}

Valid values are top, middle, or bottom. See if one of those works for you. I think I've had the most success with top, but it's been a while since this has actually come up for me. If none of those work, try:

img {
display: block;
float: left;
}

But that may adversely affect other images on the page, forcing you to tailor it to a specific image or images that require it.

There is also:

img {
display: inline-block;
}

This may or may not be all that cross browser.

Though I never tried it, this may work:

img {
font-size: 1px;
}

[russ_e]

John - thanks for such a prompt response. Your first suggestion (img {vertical-align: top;}) works a treat, and it's something I would have never thought of given that I already have td contents vertically aligned that way in the stylesheet.

It seems unfortunate that such kludges are required for strict markup, and the logic that inline components are allocated 'additional' bottom padding in strict rendering is totally weird. Presumably inline components other than img might need similar treatment, or is this just another example of how inconsistent the html specs are? (I've always thought that img should have been deemed to be a block element - life might have been rather easier!)

[jscheuer1]

As I said, I never fully understood this particular rule myself. It seems like a sort of tyranny on the part of those who make the standards, arising from their inability to consider the reality of web design.

However, without standards of some kind, the designer's job would be made even more difficult because there would be no starting point as far as getting things to look the same, or at least acceptable in most browsers.

Fortunately the new HTML 5 DOCTYPE relaxes some of the frivolous requirements of previous standards - things all browsers 'error correct' for any way. I quoted 'error correct' because many of these errors were never errors until the standards declared them to be.

But this bit with the images apparently (testing in Firefox 3 shows that it currently does) persists in HTML 5.