styling tables - firefox issue

Hi,

I have the following table mark-up:

    <table class="resultstable">
      <tr>
        <th class="first">Description</th>
        <th>Date</th>
        <th>Price</th>
        <th class="last">&nbsp;</th>
      </tr>
      <tr>
        <td class="first">XX</td>
        <td>
          XX
        </td>
        <td>&pound;XX</td>
        <td class="last">Button</td>
      </tr>
      <tr class="alt">
        <td class="first">XX</td>
        <td>
          XX
        </td>
        <td>&pound;XX</td>
        <td class="last">Button</td>
      </tr>
    </table>

Code (markup):

With the following CSS

.resultstable {
width:100%; 
border-collapse:collapse;
}
.resultstable th {
background-color:#006699;
color:#FFF;
text-align:left;
font-size:.9em;
padding:4px 0 4px 6px;
border-bottom:1px solid #CCE9F7;
}
.resultstable td {
font-size:.9em;
padding:4px 0 4px 6px;
border-left:1px solid #CCE9F7;
border-bottom:1px solid #CCE9F7;
}
.resultstable td.first {
border-left:1px solid #006699;  
}
.resultstable td.last {
border-right:1px solid #006699;  
}
.resultstable .alt td {
background-color:#E0F2FA;
}

Code (markup):

This looks great in IE6/7 but in firefox the left border is a pixel out with the table header. The reason I haven't just added a border to the table header is that I am planning on changing the background to an image to add a curved border effect.

Any help would be appreciated.

Josh

 

i am not quite understanding you can you post your link to the webpage so that i can take a look i maybe beable to help you

 

Its better to code something for firefox then add an exceptional IE style sheet for any differences.

 

Try putting this in like this

#resultstable {
width:100%;
border-collapse:collapse;
}
#resultstable.th {
background-color:#006699;
color:#FFF;
text-align:left;
font-size:.9em;
padding:4px 0 4px 6px;
border-bottom:1px solid #CCE9F7;
}
#resultstable.td {
font-size:.9em;
padding:4px 0 4px 6px;
border-left:1px solid #CCE9F7;
border-bottom:1px solid #CCE9F7;
}
#resultstable td.first {
border-left:1px solid #006699;
}
#resultstable td.last {
border-right:1px solid #006699;
}
#resultstable .alt td {
background-color:#E0F2FA;
}

html section try this

<table><div id="resultstable">
<tr>
<div class="first">Description</th>
<th>Date</th>
<th>Price</th>
<divclass="last">&nbsp;</th>
</tr>
<tr>
<div class="first">XX</td>
<td>
XX
</td>
<td>&pound;XX</td>
<div class="last">Button</td>
</tr>
<tr class="alt">
<div class="first">XX</td>
<td>
XX
</td>
<td>&pound;XX</td>
<div class="last">Button</td>
</tr>
</table></div>

 

That's actually a bad idea. You should code to the standards rather than a browser, especially one as buggy as Firefox is on some things (especially when it comes to tables).

 

Applying borders to a collapsed table is unpredictable at best. In this case though, your problem is quite simple - you don't have left and right borders on your th, so of course they don't line up.

.resultstable {
	width:100%; 
	border-collapse:collapse;
}

.resultstable th {
	background-color:#006699;
	color:#FFF;
	text-align:left;
	font-size:.9em;
	padding:4px 0 4px 6px;
	border-bottom:1px solid #CCE9F7;
}

.resultstable td {
	font-size:.9em;
	padding:4px 0 4px 6px;
	border:solid #CCE9F7;
	border-width:0 1px;
}

.resultstable th.first,
.resultstable td.first {
	border-left:1px solid #006699;  
}

.resultstable th.last,
.resultstable td.last {
	border-right:1px solid #006699;  
}

.resultstable .alt td {
	background-color:#E0F2FA;
}

Code (markup):

Should clear that problem right up. FF wants the content area widths have to be the same (despite the spec not saying one way or the other) and not having left and right borders screws up that calculation. Adding borders to th.first and th.last makes the width calculations for both TD's and TH's identical - axing this particular little quirk.