Table line of images breaks in IE, not Firefox?

[theamazingaustin]

I have a navigation bar at the top of my site that consists of several images lined up horizontally in a table, equaling 800px, (The table width)

It works perfectly in Firefox, but IE throws a fit! The navigation randomly breaks and goes to the next line, and I don't know what to do!

Thanks!
-Austin

code:
<mvt:item name="customerlink" />
<mvt:if expr = "g.Maintenance_Warning_Message">
<font color="red">
<b>&mvte:global:Maintenance_Warning_Message;</b>
</font>
</mvt:if>

<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="http://example.net/images/header_top.jpg" width="800" height="98"></td>
</tr>
</table>
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" height="32" width="631">
<img src="http://example.net/images/midlogo.jpg" width="169" height="32"><a href="http://example.net/mm5/merchant.mvc?Screen=SFNT&Store_Code=HR1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','http://example.net/images/home_over.jpg',1)"><img src="http://example.net/images/home.jpg" alt="Home" name="home" width="81" height="32" border="0"></a><a href="http://example.net/mm5/merchant.mvc?Screen=RTPC&Store_Code=HR1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('return_policy','','http://example.net/images/return_policy_over.jpg',1)"><img src="http://example.net/images/return_policy.jpg" alt="Return Policy" name="return_policy" width="144" height="32" border="0"></a><a href="http://example.net/mm5/merchant.mvc?Screen=CNTC&Store_Code=HR1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','http://example.net/images/contact_over.jpg',1)"><img src="http://example.net/images/contact.jpg" alt="Contact Us" name="contact" width="124" height="32" border="0"></a><a href="http://example.net/mm5/merchant.mvc?Screen=BASK&Store_Code=HR1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('cart','','example.net/images/cart_over.jpg',1)"><img src="example.net/images/cart.jpg" alt="Shopping Cart" name="cart" width="174" height="32" border="0"></a><a href="&mvt:global:secure_sessionurl;Screen=OINF&Order=0&Store_Code=&mvt:global:HR1;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('checkout','','http://happyrover.web.aplus.net/images/checkout_over.jpg',1)"><img src="example.net/images/checkout.jpg" alt="Checkout" name="checkout" width="108" height="32" border="0"></a>
</td>
</tr>
</table>

[edited by: tedster at 4:26 pm (utc) on July 19, 2008]
[edit reason] use example.net in the code [/edit]

[tedster]

Hello theamazingaustin, and welcome to the forums.

I don't know the exact explanation for this quirk, but if you just remove the attribute width="631" from the <td> tag, IE no longer breaks up the images onto different lines.

I'd suggest you write your source code with a DTD at the top, and one that puts browsers in standards mode. That eliminates a lot of cross-browser difficulties.

See this thread for more details: FAQ: Choosing the best doctype for your site [webmasterworld.com]

[theamazingaustin]

Ah, thank you very much!
It's always something so simple I miss!

Thanks!
-Austin