HTML Question or How My damn table's cells won't line up without gaps

Factual Questions
1

On my website, I’m using a table that has 4 cells. 1 that spans across the lower three. Anyways, there’s a gap between the top table and the bottom ones. Here’s the url (there’s no actual images, but that shouldn’t matter as the gap is still there):

http://www.advancegb.com/upload/sdtest.htm

You can see the gap if you highlight the top left image and the one right below it. The idea being, in the finale website, that those two images will lineup to create one seamless image. Oh, and as you’ll see, I turned borders off and am also using the Valign command, yet they haven’t solved the problem.

Any ideas?

2

Your </td> is on the next line.


<TD ALIGN="left" VALIGN="TOP" COLSPAN="3"><img src="">

</TD>

HTML reads that as being a SPACE before the </td>

Put the </td> on the same line as the <td> and the problem will go away.

3 

<TD ALIGN="left" VALIGN="TOP" COLSPAN="3"><img src=""></TD>

That’s what I mean.
The problem will go away.

4

That worked great for that test page, but when I tried to apply it to my actual site (which is a bit more complex) it didn’t work. Here, I’ll just link directly to my site:

www.gamexplain.com

The problem is in the same spot.

Thanks though, as I did not know a gap such as that will cause a space, and it should have solved the problem on my actual page. I have no idea why it didn’t.

5

Note to the mods: I just realized that my above post could be mistaken for me whoring my website. I can assure you it’s not, the site isn’t even functional and you guys aren’t even my target demographic :stuck_out_tongue:

6

Same type of problem on this line.

<map id="headline" name="headline">

By setting the line down you introduce an explicit space at the end of the image which causes the additional line.

Even though HTML is not terribly whitespace aware, tags that break over lines will have an apparent space at the end.

Try this HTML:

<table border="0" cellspacing="0" cellpadding="0" width="900">
 <tr>
  <td align="left" valign="TOP" colspan="3"><img src="http://www.gamexplain.com/images-main/headline.jpg" usemap="#headline" alt style="border-style:none" / width="745" height="63"><map id="headline" name="headline">
   <area shape="rect" #archived videos coords="452,29,522,53" href="http://www.gamexplain.com/archive.htm" title="Archived Videos" />
   <area shape="rect" #frequently asked questions coords="540,30,620,53" href="http://www.gamexplain.com/questions.htm" title="Frequently Asked Questions" />
   <area shape="rect" #contact coords="636,28,706,52" href="http://www.gamexplain.com/contact.htm" title="Contact" />
   <area shape="rect" #why use game xplain? coords="347,29,436,55" href="http://www.gamexplain.com/whyxplain.htm" title="Why Use Game Xplain?" />
   <area shape="rect" #main page coords="64,23,337,54" href="http://www.gamexplain.com/" title="Main Page" />
   <area shape="default" nohref="nohref" alt /></map></td>
 </tr>
 <tr>
  <td align="left" valign="TOP" width="55"><img src="http://www.gamexplain.com/images-main/sideline.jpg" width="55" height="694"></td>
  <td align="center" valign="TOP" width="619"><br><img src="http://www.gamexplain.com/images-topstory/halo2.jpg" width="544" height="144"><br><br><br><img src="http://www.gamexplain.com/images-main/sample.jpg" width="514" height="278"></td>
  <td valign="TOP" align="center" width="226">
   <IFRAME ALIGN="left VALIGN="TOP" HEIGHT="600" WIDTH="250" SRC="http://www.gamexplain.com/sidebar.htm" FRAMEBORDER="0"></IFRAME></td>
 </tr>
</table>
7

Well, I replaced the code with what you provided, but the gap is still there. I even tried deleting the white space in front of the cell commands to see if that made a difference, but it didn’t.

Thanks for the help, odds are I messed the code up somewhere. :wink:

8

You’re specifying that the top image is to have a height of 63 pixels, but the picture is only 62 pixels high, so the browser is attempting to resize the image.

9

Thanks, I didn’t catch that. Sadly, it still hasn’t solved my problem :frowning:

10

Actually what you have (after a few hours of experimentation) is a problem with Internet Explorer.

If you view your website through Opera or Netscape 7.1, that additional space between the two tables is not there.

It seems to be related specifically to the map tag. When I remove all the map attributes the problem goes away in IE.

If this really bothers you, you will probably need to seek an alternative to using maps.

Given your hyperlink areas are discrete, maybe you should consider making each one an image in its own right and using the image as a hyperlink rather than setting map coords.

Sorry I can’t help more, but this look like the browser issue rather than your HTML.

11

Wow, you really didn’t have to invest so much time into it, though I really appreciate it. Very interesting that the map is causing the problem in Internet Explorer and not other browsers.

Anyways, I’m thinking I might just learn, and subsequently use CSS as I’ve heard it’s better suited to what I’m doing than tables are.

Again, thanks so much for the help.

12

Instead of getting rid of the maps, you could just move them. They don’t need to be physically near the image they describe in order to work. Simply take everything between the <map> and </map> tags and place those in another part of your document (preferably closer to the top of the document.)