Bottom table row (tr) border not showing in IE, works in Firefox

Sorry if this is long

[Cienwen]

Hi Everybody,

I have a table where the <tr> has a Bottom-Border of 1px set in an external style sheet. This gives the illustion of a table made of rows instead of cells. You know what I mean.

The thing is, it works great in Firefox but it dosen't show up in IE(6). Anyone have an idea. Here's a little CSS and HTML.

/* ========== Parts & Accessories */
#parts_accessories{
clear:both;
margin-bottom:20px;
border-right: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;

}
#parts_accessories th{
font-size:11px;
color:#fff;
text-align:center;
background:#666;
font-weight: bold;
padding:5px 0;
border-bottom: 1px solid #e5e5e5 !Important;
}
.pa_bg_cell{
border-bottom: 1px solid #e5e5e5 !Important;
}
.pa_bg_cell_off{
border-bottom: 0px solid #e5e5e5 !Important;
}
.pa_tbl_content{
text-align:left !Important;
padding:8px !Important;
font-size:11px;
color:#666;
vertical-align:middle;
}
.pa_tbl_contentBold{
text-align:left !Important;
padding:8px 0 8px 8px !Important;
font-size:11px;
font-weight: bold;
color:#666;
vertical-align:middle;
}
.centered{
text-align:center !Important;
vertical-align:middle;
padding:5px !Important;
}

And the HTML:

<!-- parts & accessories start -->
<div class="product_head">Parts &amp; Accessories</div>
<table width="100%" cellspacing="0" id="parts_accessories" summary="Parts &amp; Accessories">
<tr>
<th class="centered pa_tbl_content" abbr="Image">Image</th>
<th class="pa_tbl_content" abbr="Image">Item</th>
<th class="pa_tbl_content" abbr="Image">Size</th>
<th class="centered pa_tbl_content" abbr="Image">Part Number</th>
<th class="centered pa_tbl_content" abbr="Image">UPC Code</th>
<th class="centered pa_tbl_content" abbr="Image">Dimensions</th>
<th class="pa_tbl_content" abbr="Image">Weight</th>
</tr>
<tr class="pa_bg_cell_off">
<td class="centered"><img src="images/P20-4-thmb.jpg" alt="" /></td>
<td class="pa_tbl_contentBold">Kit</td>
<td class="pa_tbl_content">&nbsp;</td>
<td class="centered pa_tbl_content">253026</td>
<td class="centered pa_tbl_content">662679994648</td>
<td class="centered pa_tbl_content">27.75&quot; x 17&quot; x 8.25&quot; </td>
<td class="pa_tbl_content">76 lbs</td>
</tr>
<tr class="pa_bg_cell">
<td class="centered">&nbsp;</td>
<td class="pa_tbl_contentBold">Kit (without <br />
Jaws)</td>
<td class="pa_tbl_content">&nbsp;</td>
<td class="centered pa_tbl_content">253026-T</td>
<td class="centered pa_tbl_content">662679997748</td>
<td class="centered pa_tbl_content">27.75&quot; x 17&quot; x 8.25&quot;</td>
<td class="pa_tbl_content">24.8 lbs</td>
</tr>
<tr class="pa_bg_cell">
<td class="centered"><img src="images/copperjaw-thmb.jpg" alt="" /></td>
<td class="pa_tbl_contentBold">Copper Jaw</td>
<td class="pa_tbl_content"><p>1/2&quot;<br />
3/4&quot;<br />
1&quot;<br />
1 1/4&quot;<br />
1 1/2&quot;<br />
2&quot;</p> </td>
<td class="centered pa_tbl_content">253291<br />
253292<br />
253293<br />
253294<br />
253295<br />
253296<br /></td>
<td class="centered pa_tbl_content">662679994662<br />
662679994679<br />
662679994686<br />
662679994693<br />
662679994709<br />
662679994716</td>
<td class="centered pa_tbl_content">6&quot; x 4&quot; x 2&quot;
<br />
7&quot; x 4&quot; x 2&quot;
<br />
6.5&quot; x 5&quot; x 2&quot;
<br />
6.5&quot; x 5&quot; x 3&quot;
<br />
8&quot; x 7.5&quot; x 2.25&quot;
<br />
9&quot; x 7.5&quot; x 2.25&quot; </td>
<td class="pa_tbl_content">4.1 lbs<br />
4.1 lbs<br />
5 lbs<br />
5 lbs<br />
11.75 lbs<br />
11.75 lbs</td>
</tr>
<tr class="pa_bg_cell">
<td class="centered"><img src="images/P20battery-thmb.jpg" alt="" /></td>
<td class="pa_tbl_contentBold">Battery</td>
<td class="pa_tbl_content">14.4V<br />
MAKITA </td>
<td class="centered pa_tbl_content">252932</td>
<td class="centered pa_tbl_content">662679994075</td>
<td class="centered pa_tbl_content">3.7&quot; x 3.7&quot; x 4.2&quot; </td>
<td class="pa_tbl_content">3 lbs</td>
</tr>
<tr class="pa_bg_cell">
<td class="centered"><img src="images/P20charger-thmb.jpg" alt="" /></td>
<td class="pa_tbl_contentBold">Charger</td>
<td class="pa_tbl_content">14.4V<br />
MAKITA </td>
<td class="centered pa_tbl_content">252928</td>
<td class="centered pa_tbl_content">662679994082</td>
<td class="centered pa_tbl_content">9.5&quot; x 3.4&quot; x 3.4&quot; </td>
<td class="pa_tbl_content">2.5 lbs</td>
</tr>
</table>
<!-- parts & accessories end -->

[alt131]

The thing is, it works great in Firefox but it dosen't show up in IE(6).

On the code provided the styling did not work as described in FF or ie. The following works for FF and ie6 & 7:

Add a type selector to your class .pa_bg_cell:

.pa_bg_cell td {
border-bottom: 4px solid #e5e5e5 !important;
}

and add the rule:

table {
border-collapse:collapse;
}

before your table classes. This means you can remove cellspacing="0" from <table> in your html as well.

A lot of work has obviously gone in here - but on the sample provided, have you considered simplifying the styling so you can avoid using so many classes?

[Cienwen]

Adding a type selector was exactly what I needed.

That works.

I appreciate your comments regarding condensing the CSS. I agree that would be ideal, but alas, I have inherited this and it would be a major project to rehash the CSS. Now that it is working right, I can live with it.

Thanks!