Problem rendering styles in IE, other browsers fine

[inCahoots]

I'm trying to add padding and a background image to my left nav table via the external style sheet. It works in Firefox, Opera and Chrome, but IE 7 and 6 don't show either attribute at all.

I'm totally stumped. Both the CSS and the html validates. Can someone see what I'm doing wrong?


<table border="0" width="216" class="leftNavTable1" id="leftNavTable1">
<tr>
<td valign="bottom" width="81">&nbsp;
</td>
<td valign="bottom">
<a href="aboutus.asp" target="_top"
onClick="MM_nbGroup('down','group1','aboutus','',1)"
onMouseOver="MM_nbGroup('over','aboutus','/images/aboutus_mouse.gif','',1)"
onMouseOut="MM_nbGroup('out')">
<img border="0" name="aboutus" src="/images/aboutUs.gif" alt="about us"></a>
</td>
</tr>
<tr>
<td valign="bottom" width="81">&nbsp;
</td>
<td valign="bottom">
<a href="ourservices.asp" target="_top"
onClick="MM_nbGroup('down','group1','ourservices','',1)"
onMouseOver="MM_nbGroup('over','ourservices','/images/ourservices_mouse.gif','',1)"
onMouseOut="MM_nbGroup('out')">
<img border="0" name="ourservices" src="/images/ourservices.gif" alt="Our Services"></a>
</td>
</tr>
<tr>
<td valign="bottom" width="81">&nbsp;
</td>
<td valign="bottom">
<a href="ourpeople.asp" target="_top"
onClick="MM_nbGroup('down','group1','ourpeople','',1)"
onMouseOver="MM_nbGroup('over','ourpeople','/images/ourpeople_mouse.gif','',1)"
onMouseOut="MM_nbGroup('out')">
<img border="0" name="ourpeople" src="/images/ourpeople.gif" alt="Our People"></a>
</td>
</tr>
<tr>
<td valign="bottom" width="81">&nbsp;
</td>
<td valign="bottom">
<a href="ourclients.asp" target="_top"
onClick="MM_nbGroup('down','group1','ourclients','',1)"
onMouseOver="MM_nbGroup('over','ourclients','/images/ourclients_mouse.gif','',1)"
onMouseOut="MM_nbGroup('out')">
<img border="0" name="ourclients" src="/images/ourclients.gif" alt="Our clients"></a>
</td>
</tr>
<tr>
<td valign="bottom" width="81">&nbsp;
</td>
<td valign="bottom">
<a href="articles.asp" target="_top"
onClick="MM_nbGroup('down','group1','articles','',1)"
onMouseOver="MM_nbGroup('over','articles','/images/articles_mouse.gif','',1)"
onMouseOut="MM_nbGroup('out')">
<img border="0" name="articles" src="/images/articles.gif" alt="Articles"></a>
</td>
</tr>
<tr>
<td valign="bottom" width="81">&nbsp;
</td>
<td valign="bottom">
<a href="catalogmakeovers.asp" target="_top"
onClick="MM_nbGroup('down','group1','catalogmakeovers','',1)"
onMouseOver="MM_nbGroup('over','catalogmakeovers','/images/catalogmakeovers_mouse.gif','',1)"
onMouseOut="MM_nbGroup('out')">
<img border="0" name="catalogmakeovers" src="/images/catalogmakeovers.gif" alt="Catalog Makeovers"></a>
</td>
</tr>
<tr>
<td valign="bottom" width="81">&nbsp;
</td>
<td valign="bottom">
<a href="contactus.asp" target="_top"
onClick="MM_nbGroup('down','group1','contactus','',1)"
onMouseOver="MM_nbGroup('over','contactus','/images/contactus_mouse.gif','',1)"
onMouseOut="MM_nbGroup('out')">
<img border="0" name="contactus" src="/images/contactus.gif" alt="Contact us"></a>
</td>
</tr>
</table>


...And here's the snippet from the style sheet:


.leftNavTable1 {
border-collapse: collapse;
background-image: url(/images/left.gif);
}

.leftNavTable1 td {
padding: 10px 0px 10px 0px;
text-align: left;
}

[Fang]

Table displays the same in all browsers. Perhaps some other css is causing the problem.