The trouble I'm having is that both browsers I'm testing (Firefox & Safari) are putting an extra 1 pixel spacing on either the left or the right of my table row
Safari: Firefox: Here's the relevant XHTML:
Code: Select all
<table class = "fancy">
<tr class = "header">
<th>
<div>
Peace River
</div>
</th>
</tr>
<tr class = "stroke">
<td>
test
</td>
</tr>
<tr class = "stroke">
<td>
test again
</td>
</tr>
<tr class = "stroke">
<td>
third test
</td>
</tr>
<tr class = "stroke">
<td>
fourth test
</td>
</tr>
</table>Code: Select all
table.fancy{
border-collapse:collapse;
border-spacing:0;
border-width:0;
width:100%;
}
table.fancy tr.header{
color:#fff;
height:25px;
line-height:25px;
padding-left:0;
}
table.fancy tr.header th{
margin:0;
background: transparent url(/include/templates/images/fancy-right.png) no-repeat top right;
text-align:left;
padding:0;
}
table.fancy tr.header th div{
background: transparent url(/include/templates/images/fancy-left.png) no-repeat top left;
padding-left:5px;
padding-right:5px;
}
table.fancy tr.stroke{
border:1px solid #bfbfbf;
}Any ideas what's causing this?