IE7 displays table headers differently - html

Question

I have a table with headers and each header contains a span which have a background image that i use as a sperator between the th.
On all browsers it display as it should but on IE7 the seperator image (which is a span with background)
is showing on the bottom.
Good (IE8+,Chrome,FF):
Bad (IE7):
HTML:
<div class="tableWrapper">
<table>
<thead>
<tr>
<th class="sortable top-left-round">Lead Id<span></span></th>
<th class="sortable">Create Date<span></span></th>
<th class="sortable">Target Group<span></span></th>
<th class="sortable">Activity<span></span></th>
<th class="sortable">Type<span></span></th>
<th class="sortable">Last Update<span></span></th>
<th class="sortable">Close Date<span></span></th>
<th class="action_header_short top-right-round"><span>View</span></th>
</tr>
</thead>
<tbody>
<tr class="first">
<td>1</td>
<td class="col_name" title="Jackson">10/12/2011</td>
<td title="Jackson">Jackson</td>
<td title="Jackson">Jackson </td>
<td title="Jackson">Jackson</td>
<td title="Jackson">10/12/2011</td>
<td title="Jackson">10/12/2011</td>
<td class="action"></td>
</tr>
<tr>
<td>1</td>
<td class="col_name" title="Jackson">10/12/2011</td>
<td title="Jackson">Jackson</td>
<td title="Jackson">Jackson </td>
<td title="Jackson">Jackson</td>
<td title="Jackson">10/12/2011</td>
<td title="Jackson">10/12/2011</td>
<td class="action"></td>
</tr>
</tbody>
</table>
</div>
<!-- end .tableWrapper -->
CSS:
table{
width: 890px;
margin-left: 25px;
border-collapse:collapse;
}
td{
border: 1px solid #99a3a7;
}
.top-left-round{
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 5px 0px 0px 0px;
border-radius: 5px 0px 0px 0px;
}
.top-right-round{
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 5px 0px 0px;
border-radius: 0px 5px 0px 0px;
}
table thead th{
background: url(../images/table-header-bg.png) repeat-x;
height: 42px;
line-height: 40px;
border: 0px solid transparent;
font-weight:normal;
}
th.action_header span {
margin-right:50px;
}
th.action_header {
width: 120px;
text-align: left;
padding-left: 20px
}
th.action_header_short{
padding-left: 20px;
}
th a.sortable,th.action_header span,th.action_header_short span {
color: #fff;
font-size: 15px;
font-weight: normal;
text-decoration: none;
}
th a.sortable{
padding: 0 15px;
background: url(../images/icons/arrow_dwn.png) right center no-repeat;
}
th.sortable span{
background: url(../images/cols-seperator.png) right top no-repeat;
float:right;
margin-right: -2px;
width:5px;
height: 42px;
}
th a:hover{
color: #fff;
}
tbody td{
padding: 0 5px;
}
td.action{
width:74px;
padding: 2px;
}
.tableWrapper{
border-bottom: 1px solid #E5E5E5;
padding-bottom: 8px;
}

Answer 1

Style this with CSS instead of an image. You're always going to have issues using an image like this.