Compatibility issues with IE

I'm using tables to display my logo and footer.
The site looks great on firefox and chrome, but every version of Internet Explorer I've checked (*6,7,8*) messes the tables and my upper black stripe.

I've uploaded a test page so you could see it live:
clubtest dot spreadshirt dot com

How can I fix this?

 

for starters, you are really not supposed to build menus with tables in the way that you have done, it is very backwards.
Then you really need to specify width and height for every table cell that is a container for a image. When you do slicing like this, the software you use will set these widths and heights for you.

But you would save yourself a ton of grief if you just make the menu into a ul list instead and use css to set the width and height of the ul to match your menu background - the whole image for the section. Then used the separate images for the links as backgrounds for every li item containing a link. Less code, less images, less trouble.

 

I totally agree. No one uses tables anymore, unless you are displaying tabular data. Use CSS2 and <DIV> tags for layout. Use <UL><LI> tags for your menu and control them with CSS.

 

True, I figured out that ul,li thing a bit late.
The problem is, it would take a serious amount of time to change the structure because I'm not 100% familiar with the method you've mentioned.

There must be a quick way to make IE handle tables like firefox/chrome/safari.

I've specified correct width and height for each <td> but still no luck.

 

Don't have access to IE right now, but have you played around with the centering of the table for the footer and seen if that makes a difference?

 

If you insist on using those tables, there's a pretty quick way to fix the issues by saving the table html from within the slicing software you used with different settings for saving files.

I used to use photoshops slicing features back in the day, and when slicing half way comlex tables you need to look at the preferences for how the html code is saved.
you need to set your preferences to write heights and widths for the cells automatically, and you also need to allow for using spacer cells with image content(a transparent gif so it won'ät show, but it-ll keep things together)

The purpose is to do all settings so that when you save your images and html, you should have a ready made, tight table with the slices right where you want them and no holes or gaps.
Then you paste the whole table code into your document, and do NOT attempt to remove any rows or cess that you might think are unneccessary - they all willl need to be there.

Then use the images in the button cells to make the css rollovers on hover, but do no other css that affects that paricular table. Just the rollovers.

 

So I took the time to learn how to do it the right way. No more tables.
Thanks for the tip, and for taking the time to help beginners.
I really appreciate it.