Welcome to WebmasterWorld Guest from 23.22.182.29

Forum Moderators: not2easy

Message Too Old, No Replies

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

Sorry if this is long

     
6:50 pm on Aug 28, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 22, 2005
posts: 110
votes: 0


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 -->

4:34 am on Aug 30, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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?

7:08 pm on Sept 3, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 22, 2005
posts: 110
votes: 0


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!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members