HTMLHelp Forums > Spacing vertically within a table

Full Version: Spacing vertically within a table

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

Sigma

Aug 15 2008, 10:10 PM

I am designing a site and the entire site is laid out within tables to format it. However, in one of the tables there is vertical spacing between the td sections. I have no clue what is causing it... both border-spacing and padding are set to 0px. Thanks for the help!

Here is an image of what I am talking about:
http://img106.imageshack.us/img106/943/image2ja4.jpg

And here is the code:

CODE

<!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" xml:lang="en" lang="en">

<head>
<title>Title</title>

<style type="text/css">
body {background-color: #000000;}
a:link {color: #000000;
        text-decoration: underline;}
a:active {color: #000000;
          text-decoration: underline;}
a:visited {color: #000000;
           text-decoration: underline;}
a:hover {color: #ff0000;
         text-decoration: underline;}
table.main {border-width: 0px 0px 0px 0px;
            border-spacing: 0px;
            background-color: #e7772b;}
table.main td {border-width: 0px 0px 0px 0px;
               padding: 0px;
               background-color: #e7772b;
               vertical-align: top;}
img {border: 0px;}
#news {background-image: url(images/news.jpg);
       height: 100px;
       width: 450px;}
#matches {background-image: url(images/matches.jpg);
          height: 100px;
          width: 450px;}
#content {height="700";
          width: 877px;}
#bottom {background-image: url(images/bottom.jpg);
          height: 50px;
          width: 900px;
          text-align: center;}
</style>
</head>

<body>

<table class="main">

<tr><td colspan="2"><img src="images/ban.jpg" alt="Team NAT." /></td></tr>
<tr><td colspan="2"><img src="images/nav.jpg" alt="Navigation" usemap="#nav" id="image1" /></td></tr>
<tr><td id="news">
      <p>    <a href="index.htm">Welcome to the new site</a><br />
          <a href="index.htm">Team NAT. is formed</a><br />
          <a href="index.htm">BlizzCon tickets sold out</a></p></td>
    <td id="matches">
      <p>    [Win] August 14, 2008 vs. RA3 <a href="matches.htm">(Replay)</a><br />
          [Loss] August 14, 2008 vs. RA3 <a href="matches.htm">(Replay)</a><br />
          [Win] August 14, 2008 vs. RA3 <a href="matches.htm">(Replay)</a></p></td></tr>
<tr><td colspan="2">
      <table class="main">
         <tr><td><img src="images/left.jpg" alt="Left" /></td>
             <td id="content"><p>Main Text Section</p></td>
             <td><img src="images/right.jpg" alt="Right" /></td>
         </tr>
      </table></td></tr>
<tr><td id="bottom" colspan="2"><br />© 2008 NAT. All rights reserved. Site by Samuel Sifter. Site viewed best with <a href="http://www.mozilla.com/en-US/firefox/" target="_blank">Firefox</a>.</td></tr>

</table>

</body>

</html>

Christian J

Aug 16 2008, 03:29 AM

Sounds like http://developer.mozilla.org/en/docs/Image...Mysterious_Gaps

pandy

Aug 16 2008, 09:41 AM

If it isn't, please post the URL to the page.

Sigma

Aug 16 2008, 10:46 AM

Wow, thank you Christian J! It indeed was the "Mysterious Gaps." I made some last minute changes to the site, and then added the DOCTYPE. After these changes is when it occurred. I went back and undid all the changes except for the DOCTYPE, because I didn't think that would cause the problem haha!

Anyways, if I use the XHTML Strict DOCTYPE this occurs, but if I use XHTML Transitional DOCTYPE the site appears fine. Very interesting indeed! Thanks again for the help, I was up all night trying to figure this out and never would have without your help!

pandy

Aug 16 2008, 11:04 AM

You should read this too. Then the doctype won't be the last thing you add anymore.

http://hsivonen.iki.fi/doctype/

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.