tags:

views:

98

answers:

2

The following code is fine without doctype declaration:

<style type="text/css">
body {
    font: 1.0em verdana, arial, sans-serif;
}

* {
    margin:0; padding:0;
}

</style>

<table cellpadding="0" cellspacing="0" border="0">
     <tr>
      <td><img src="/images/title_equipment.gif" /></td>
      <td><img src="/images/about.gif" /></td>
      <td><img src="/images/services.gif" /></td>
      <td><img src="/images/systems.gif" /></td>
      <td><img src="/images/equipment_new.gif" /></td>
      <td><img src="/images/equipment_used.gif" /></td>
      <td><img src="/images/news.gif" /></td>
      <td><img src="/images/contact.gif" /></td>
     </tr>
     <tr>
      <td><img src="/images/balers.gif" /></td>
     </tr>
</table>

But after adding doctype:

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

There is spacing between "tr",even though cellspacing and cellpadding are both zero.

+2  A: 

An HTML page that does not use a doctype, or has a doctype but it's preceded by an XML prologue (I believe this one only applies to IE) is rendered in what it's called quirks mode. The other rendering mode is standards mode.

Now, you're problem is due to the fact that IMG elements are inline elements, which means that, in standards mode, they'll have a little space beneath them. This does not apply in quirks mode.

The quickest solution is to declare display:block for those IMG elements. There's more info about this issue on Mozilla Developer Center.

Ionuț G. Stan
Why do inline elements have space beneath them in standards mode?Any reason for that?
Shore
There's a through explanation on the MDC link in my answer.
Ionuț G. Stan
And can't css control that "little space beneath them"?
Shore
Yes, it can. Use `img { display: block; }`.
Ionuț G. Stan
I can't make img display as block,I mean can that space be controlled by "margin:0" or "padding:0"?
Shore
No you can't control them using margin or padding. Another solution would be to float them left/right.
Ionuț G. Stan
After I use "a" tag to embrace the "img" tag,there comes a strange border around that "img",why is it so?
Shore
After I put img into a separate "td",that space disapears!
Shore
A: 

As Ionut has already suggested, without the DOCTYPE you are running in Quirks mode. Although it appears that this renders better for you, it will actually render differently in many other browsers.

By introducing an appropriate DOCTYPE, you will be instructing the browser to render in Standards Mode (or in Almost Standards Mode for certain browser/DOCTYPE combinations). Although this doesn't appear to render as well for you, it will actually render much more consistently across all browsers so there is a greater chance that everyone else will see what you see. If you fix the styling for your standards mode implementation, it will look good to all visitors to your page.

Comparison of DOCTYPES

As for a solution, I'm afraid I can't beat that MDC article that explains both the issue and the solution much better than I ever could.

CJM
fixed by vertical-align:bottom and set img's border to zero!
Shore