Table width looks different in IE and Firefox

[mistahmiles]

I am designing a table-based menu. I want the table to take up the entire screen, as it is separating my banner image and the beginning of the text. Anyways, as you can see, I used the "width:100%" attribute. But in Firefox, this shows the table pushed right 0.5em, so I added a "margin-left:-0.5em" attribute, which makes it look great in Firefox; in IE, however, it shows the table ending 0.5em left of the right side of the window, and the table being a few pixels shorter on the left side. How can I make the menu look the same in both IE and Firefox? Thanks!


Here is the code:

<table cellpadding=5 style="white-space: nowrap; width:100%; height:2em; position:absolute; top:8em; background-color: red; color: white; font: 15pt arial;font-color:white; font-weight: bold; margin-left:-0.5em">
<tr>
<td style="white-space: nowrap;"><a href="index.html">Home</a></td>
<td style="white-space: nowrap;"><a href="aboutus.html">About Us</a></td>
<td style="white-space: nowrap;"><a href="routesandfleet.html">Routes & Fleet</a></td>
<td style="white-space: nowrap;"><a href="pilotresourcecenter.html">Pilot resource center</a></td>
<td style="white-space: nowrap;"><a href="becomeapilot.html">Become a pilot</a></td>
<td width=40%><!--Blank td added to condense menu items-->
</tr>
</table>

[drhowarddrfine]

In modern browsers, html and body can be styled seperately, but not IE. So, add this to your css:
*{margin:0}