homepage Welcome to WebmasterWorld Guest from 54.211.73.232
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Bottom table row (tr) border not showing in IE, works in Firefox
Sorry if this is long
Cienwen

5+ Year Member



 
Msg#: 3733761 posted 6:50 pm on Aug 28, 2008 (gmt 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 -->

 

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3733761 posted 4:34 am on Aug 30, 2008 (gmt 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?

Cienwen

5+ Year Member



 
Msg#: 3733761 posted 7:08 pm on Sep 3, 2008 (gmt 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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved