HTML - Código no se ve bien en FireFox

Tengo una consulta que hacer sobre la renderización de una página web en IE y FF, en ambos se ve diferente y no se como puedo hacer para que solucionar el problema, por ejemplo, este es un fragmento de código de la página, las esquinas de la tabla son redondeadas con imágenes, este fragmento de código SE VE BIEN en ambos exploradores:


<!-- Place the Shopcart short cut here -->

<tr>

<td style="LEFT: 29px; POSITION: relative" colSpan="2">

<IMG style="POSITION: relative;TOP: 14px;LEFT: 0px;Z-INDEX: 2" height="11" src="images/Inside_TopLeft.gif" width="11">

<IMG style="POSITION: relative;TOP: 14px;LEFT: 135px;Z-INDEX: 2" height="11" src="images/Inside_TopRight.gif" width="11">

<table class="main_B2_L2_R2_T2" height="120" cellSpacing="0" cellPadding="0" width="160">

<tr height="20">

<td>

<table>

<tr>


<td width="20%" valign="top">  <span id="ShopCart1_Label1" style="font-weight:bold;">Cart : </span></td>

<td><span id="ShopCart1_lblCart"></span> </td>

</tr>

</table>

</td>

</tr>

<tr height="20">

<td>


<table>

<tr>

<td width="60%">  <span id="ShopCart1_Label3" style="font-weight:bold;">Items in Cart : </span></td>

<td align="center"><span id="ShopCart1_lblItems"></span> </td>

</tr>

</table>

</td>

</tr>


<tr height="20">

<td><table>

<tr>

<td width="45%">  <span id="ShopCart1_Label5" style="font-weight:bold;">Sub-Total : </span></td>

<td align="right"><span id="ShopCart1_lblSubt"></span> </td>

</tr>

</table>

</td>


</tr>

<tr height="30">

<td align="middle">

<a id="ShopCart1_goToButton" disabled="disabled" class="GoToCartButton" href="http://argonaut/SnapTrackerWeb6/default.aspx?IMN_Id=121" style="height:20px;">Go to Cart</a>

<a id="ShopCart1_lbtnDummy" href="javascript:__doPostBack('ShopCart1$lbtnDummy','')"></a>

</td>

</tr>

<tr height="30">


<td align="middle"><select name="ShopCart1:selectCart" id="ShopCart1_selectCart" onchange="return fnChangeSelection("ShopCart1_selectCart");" onchange="__doPostBack('ShopCart1$selectCart','')" language="javascript" style="width:150px;">

<option value="-1">Select another cart...</option>

<option value="-2">Create New Cart</option>

<option value="-3">View All Carts</option>


</select></td>

</tr>

<!--tr><td align="center"> </td></tr--></table>


<IMG style="POSITION: relative;TOP: -11px;LEFT: 0px;Z-INDEX: 2" height="11" src="images/BotInsideWhiteLeft.gif" width="11">

<IMG style="POSITION: relative;TOP: -11px;LEFT: 135px;Z-INDEX: 2" height="11" src="images/BotInsideWhiteRight.gif" width="11">


</td>

Ahora, este otro fragmento de Código tiene problemas en firefox, en IE se ve perfecto, me gustaría saber que puede ser el problema y como solucionarlo:

<div id="_x_1_HeaderControl1_pnlCustomer">


<TD >


<IMG style="Z-INDEX: 1; LEFT: 413px; POSITION: relative; TOP: -44px" height="11" src="images/Top_Left.gif" width="11">

</TD>

<TD >

<IMG style="Z-INDEX: 1; RIGHT: -532px; POSITION: relative; TOP: -44px" height="11" src="images/Top_Right.gif" width="11">

</TD>

<!--<TD align="right"><IMG class="custSelectLeftNET" src="images/Customer_left.gif">

</TD>-->

<TD class="custSelect">



<DIV>

<span id="_x_1_HeaderControl1_AvailableCustomerListControl1_Label1">          

          

             </span>


<span id="_x_1_HeaderControl1_AvailableCustomerListControl1_lblText">Select a Customer</span>

<select name="_x_1:HeaderControl1:AvailableCustomerListControl1:CustomerDropDownList" id="_x_1_HeaderControl1_AvailableCustomerListControl1_CustomerDropDownList" class="medium" onchange="__doPostBack('_x_1$HeaderControl1$AvailableCustomerListControl1$CustomerDropDownList','')" language="javascript">

<option selected="selected" value="ABACHELOR">A - BACHELOR - BACHELOR</option>

<option value="ACRUNCH">A - CRUNCH - CRUNCH</option>

<option value="ADUMMY">A - DUMMY - DUMMY CUSTOMER</option>

<option value="AM-PONY">A - M-PONY - M-PONY</option>


<option value="AMARIOS">A - MARIOS - MARIOS</option>

<option value="AMARIOS2">A - MARIOS2 - MARIOS</option>

<option value="AMARIOS3">A - MARIOS3 - MARIOS3</option>

<option value="APRESOLD">A - PRESOLD - Pre-sold goods</option>

<option value="Atest01">A - test01 - test01</option>

<option value="ATESTPRE">A - TESTPRE - TESTPRE</option>


<option value="BBACHELOR">B - BACHELOR - TESTING</option>

<option value="BTESTCOB">B - TESTCOB - TEST CUSTOMER FOR COMPANY B</option>

<option value="CBOMBA">C - BOMBA</option>

<option value="CCRUNCH">C - CRUNCH - CCCCCCCCCCCCCCC - CRUNCH</option>

<option value="DDS-001">D - DS-001 - some d</option>

<option value="Dsumsa">D - sumsa - sumsarra sara</option>


<option value="ZFB">Z - FB - fly boy zippy</option>


</select>





</DIV>

</TD>

<!--<TD><IMG class="custSelectRightNET" src="images/Customer_right.gif"></TD>-->

<TD>

<IMG style="Z-INDEX: 1; LEFT: 37px; POSITION: relative; TOP: -5px" height="11" src="images/Bottom_Left.gif" width="11">

</TD>


<TD>

<IMG style="Z-INDEX: 1; RIGHT: -156px; POSITION: relative; TOP: -5px" height="11" src="images/Bottom_Right.gif" width="11">

</TD>



</div>

Me equivoque en el primer código, este es asi:

<!-- Place the Shopcart short cut here -->

<tr>

<td colSpan="3"><div style="LEFT: 29px; POSITION: relative">

<IMG style="POSITION: relative;TOP: 14px;LEFT: 0px;Z-INDEX: 2" height="11" src="images/Inside_TopLeft.gif" width="11">


<IMG style="POSITION: relative;TOP: 14px;LEFT: 135px;Z-INDEX: 2" height="11" src="images/Inside_TopRight.gif" width="11">

<table class="main_B2_L2_R2_T2" height="120" cellSpacing="0" cellPadding="0" width="160">

<tr height="20">

<td width="100%">

<table width="100%" style="TABLE-LAYOUT: fixed">

<tr>

<td width="25%" valign="top">  <span id="ShopCart1_Label1" style="font-weight:bold;">Cart : </span></td>

<td width="75%" style="WIDTH: 100px; WORD-WRAP: break-word"><span id="ShopCart1_lblCart"></span> </td>

</tr>


</table>

</td>

</tr>

<tr height="20">

<td>

<table>

<tr>

<td width="60%">  <span id="ShopCart1_Label3" style="font-weight:bold;">Items in Cart : </span></td>


<td align="center"><span id="ShopCart1_lblItems"></span> </td>

</tr>

</table>

</td>

</tr>

<tr height="20">

<td><table>

<tr>

<td width="45%">  <span id="ShopCart1_Label5" style="font-weight:bold;">Sub-Total : </span></td>


<td align="right"><span id="ShopCart1_lblSubt"></span> </td>

</tr>

</table>

</td>

</tr>

<tr height="30">

<td align="middle">

<a id="ShopCart1_goToButton" disabled="disabled" class="GoToCartButton" href="http://argonaut/SnapTrackerWeb/default.aspx?IMN_Id=121" style="height:20px;">Go to Cart</a>


<a id="ShopCart1_lbtnDummy" href="javascript:__doPostBack('ShopCart1$lbtnDummy','')"></a>

</td>

</tr>

El atributo position:relative tiene que estar a nivel de div, para que firefox lo procese de forma correcta. Incluye tu código en una etiqueta div:

<div id="aux" style="Z-INDEX: 1; LEFT: 413px; POSITION: relative; TOP: -44px" height="11" >
<TD >
<IMG src="images/Top_Left.gif" width="11">
</TD>

</div>