Extra spaces appearing in IE, but not in other browsers

[puffnstuff]

Not sure if this is a CSS problem/solution or something directly within the HTML...

I just hope this is something very simple to correct, such as a padding declaration (although I've tried many different padding settings, to no avail so far). The test page is here:

http://www.makosmotorsports.com/schedule2.html

Looks fine in FF (Windows) and Safari (Mac), but in IE I get a separation of components, creating transparent spaces where I don't want them. There are currently 2 spaces showing in IE.....The first is directly under the site masthead, and the second is under the "SCHEDULE" header, between the header and the actual table.


Is there anything I can do to fix this? I can't really go on with this site until this is resolved. Many thanks in advance.
Thanks Edit/Delete Message

[boogyman]

try to reset the padding and margins of the elements in question, then applying them where they are needed only


selector { /* resets the elements default padding and margins */
margin: 0;
padding: 0;
}




selector {
margin: 0;
margin-top: 1em 0 1em 0; /* top and bottom margin of 1 em */
padding: 0;
padding-bottom: 0 1em 0 1em; /* left and right padding of 1em */
}

[puffnstuff]

In the CSS, I have set the body and all td elements to 0 padding and 0 margins. No effect....the gaps are still there. Am I missing something in your explanation?

[boogyman]

reset the table rows (tr) I have a feeling thats what is causing it.

also why do you have the width of the data cells when the content is only 2 rows?

[puffnstuff]

Yeah, I have the tr set to 0 margin and padding in the CSS as well. No difference.

Not sure what you mean about the width of the data cells, though....

Also, just noticed in Safari (Mac), with the left side menu, the horizontal pop-outs are appearing BEHIND the table in the centre, rather than ON TOP of it. Only happens in Safari. Works ok in other browsers. This should be a fun one to fix.. :confused:

[puffnstuff]

Well, found out that the culprit affecting the menu (in Safari Mac only) is the schedule table which I have set to scroll if it exceeds the specified height (overflow:auto). When I remove the overflow:auto; attribute, the left menu list works great. So I just have to figure out how to overcome this glitch.

Still fiddling with the padding, with no positive results. Still have the unwanted transparent space below the masthead in IE.