Table background images connecting together

[soadlink]

Hello I am working on a project for a class im taking, and I am having a little trouble with tables.

Here is the exact page I'm having problems with: http://oxygen.fvcc.edu/~c0098338/finalwebsite/main.htm

If you take a look there, you will see that the guitarist on the lefts head does not connect to his body. This is where the top table (my banner) touches the left table (soon to be a navigation bar). It is only off by about 4 pixels, and I know the image sizes are correct.

I beleive it is just something dealing with how the tables are separated from each other. The images are set as background images for the table, and not just inserted in to the table itself.

Does anyone have any ideas on how to connect the two, or know a modification in the html code I could make?

thanks

[jscheuer1]

You need to collapse the borders on your table:


<table style="border-collapse:collapse;">

You can put it in your style section like so:


table {
border-collapse:collapse;
}

or even select the table by class or id (example with class):


.collapsed, .collapse table {
border-collapse:collapse;
}

Then your table tag could look like so:


<table class="collapsed">

This is actually the most correct way, though they all work.

[soadlink]

Thanks! Works like a charm! You can refresh the page now to see its current look if you are curious to see.

I went with your suggestion of:


table {
border-collapse:collapse;
}

.. and put that into my styles.css.

So now my tables automatically inherit the border collapse feature.

Thanks again for the help!