...

View Full Version : Table Discrepancy: Firefox & IE



JAG
07-06-2011, 11:53 PM
I have this table:

http://www.unitedfleetparts.com/mm5/merchant.mvc?Store_Code=ufp&Screen=PROD&Category_Code=5_inch_exhaust_pipes&Product_Code=15-018

The intended effect is to have 1 pixel black borders, and it shows right in FF. However, in IE, the borders are shown as 2 pixels!

In my quest to further understand HTML & CSS, I am really interested to know why it shows right in FF and wrong in IE. Also, what modification(s) do I need to do in order to make my table borders in IE 1 pixel?



table.specifications {
border-collapse: separate;
width: 500px;
margin: 0;
border: 0 solid black;
padding: 0;
border-spacing: 1px;
background-color: black;
vertical-align: middle;
margin-left: 0;
margin-right: auto;
text-align: center;
}

td.specifications_title {
font-family: Arial, Helvetica, Verdana, sans-serif;
color: white;
font-size: 12px;
font-weight: bold;
font-style: normal;
vertical-align: middle;
}

td.specifications {
background-color: white;
font-family: Arial, Helvetica, Verdana, sans-serif;
color: black;
font-size: 12px;
font-weight: normal;
font-style: normal;
vertical-align: middle;
}

td.specifications_shaded {
background-color: #cccccc;
font-family: Arial, Helvetica, Verdana, sans-serif;
color: black;
font-size: 12px;
font-weight: normal;
font-style: normal;
vertical-align: middle;
}

<table class="specifications">
<tr class="specifications_title">
<td class="specifications_title">
Item #
</td>
<td class="specifications_title">
Length
</td>
<td class="specifications_title">
Price
</td>
<td class="specifications_title">
Weight
</td>
</tr>
<tr class="specifications">
<td class="specifications">
15-018
</td>
<td class="specifications_shaded">
18 in.
</td>
<td class="specifications">
$43.89
</td>
<td class="specifications_shaded">
15 Lbs.
</td>
</tr>
<tr class="specifications">
<td class="specifications">
15-024
</td>
<td class="specifications_shaded">
24 in.
</td>
<td class="specifications">
$56.68
</td>
<td class="specifications_shaded">
15 Lbs.
</td>
</tr>
</table>

teedoff
07-07-2011, 12:45 AM
Not sure I'm seeing an issue here. The table border looks the same to me. Different browsers add default padding, margin, borders, and such to different elements. You can add a global css rule to reset, but I tried that and didnt seem to affect it.

* {margin:-0; padding:0; border: none 0;}

JAG
07-07-2011, 12:52 AM
Yeah, I tried setting many global values to 0 and still no enchilada. BTW, I should've mentioned I'm using FF 5.0 and IE 8.

teedoff
07-07-2011, 12:55 AM
Yeah, I tried setting many global values to 0 and still no enchilada. BTW, I should've mentioned I'm using FF 5.0 and IE 8.

lol ok well FF5 might make a difference. I dont have it on this laptop. I do at work, but thats tomorrow, and I'm sure someone or you will figure it out by then.

Apostropartheid
07-07-2011, 03:04 PM
<td class="specifications_title">
Item #
</td>

You know we have the th element for this, right? (:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum