html doctype adds whitespace?

T

4

9

can someone please explain to me why having a doctype of

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

and

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

render the following block differently under firefox?

<table style="border-collapse:collapse; margin:0; padding:0;">
    <tr>
        <td style="border:1px solid red; margin:0; padding:0;"><img src="http://images.smh.com.au/2010/06/01/1533814/th_park-90x60.jpg" style="border:none; padding:0; margin:0;" /></td>
    </tr>
</table>

using 'Transitional', there is no white space below the image, using 'Strict' there is!

2nd question, using strict, is it at all possible to remove this whitespace?

Thorn answered 1/6, 2010 at 22:14 Comment(1)

Is there any hidden whitespace in your file? (Like spaces at the end of a line?) – Zebu 1/6, 2010 at 22:18

M

14

As you can see in this table, the first Doctype triggers quirks mode in all browsers, the second will trigger standards mode.

The rest of this story is continued at Images, Tables, and Mysterious Gaps:

Setting images to be blocks

The first choice, and one that will work for most graphically-intense designs, is to convert the image from being an inline element to a block-level element. Do that, and it no longer generates a line box, and so the problem goes away-- assuming that the image is the only thing that occupies that table cell. In the simplest case, we might add a style like this:
td img {display: block;}

Moo answered 1/6, 2010 at 22:33 Comment(2)

I just found that article as well. +1 for being faster. :) – Fussell 1/6, 2010 at 22:37

so the solution is to add display:block; on the image.. amend the answer and i'll give the tick! – Thorn 1/6, 2010 at 23:26

C

1

My suspicion is that the white space within the markup (e.g., the newlines and tabs that make the table code nicely legible) are at fault. I've encountered similar issues before, where space in the markup resulted in annoying space on the screen, even where it would appear not to matter (e.g., between <li> tags).

Try collapsing the table markup onto a single lengthy line.

Cargo answered 1/6, 2010 at 22:22 Comment(1)

no, i've tested this with no whitespace whatsoever. it's as if the renderer adds the whitespace when using the strict doctype. – Thorn 1/6, 2010 at 22:58

F

0

Not sure why the space occurs. As far as a fix goes, if you don't mind explicitly setting a height for your table cell, you can add display:block; and height:60px; to your td styles.

Fussell answered 1/6, 2010 at 22:33 Comment(0)

A

0

The first DOCTYPE will render your page in almost standards mode:

"Almost standards" mode rendering matches "standards" mode in all details except for one. The layout of images inside table cells is handled the same way "quirks" mode operates.

The second DOCTYPE will render your page in standards mode.

Albion answered 25/8, 2010 at 2:0 Comment(0)

Recommended topics

Hot tags