Menu
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?
821
HTML. Line Height Property: The CSS line-height-property can be used to set the height of the line, whose value is set to normal, by default. By setting the height of the container at 0%, the white space can be removed.
If you're using a layout that includes your theme's styling, it's possible that you see some space or a 'gap' between your header and where your content starts, or between your content and the footer of your page. This space is actually a part of your theme's layout.
Adjusting the Margin Size of an HTML Element With CSS You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .
If you try to put an image inside a <div> element that has borders, you will see an extra white space (around 3px) at the bottom of image. It happens because image is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements.
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;}
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
