I am experiencing an issue with a table that has headers, each containing a span element with a background image serving as a separator between the column headers.
While the display looks correct on most browsers, on IE7 the separator image (which is within a span with a background) appears at the bottom instead of in its intended position.
Works fine on: IE8+, Chrome, Firefox
Issue on: IE7
HTML:
<div class="tableWrapper">
<table>
<thead>
<tr>
<th class="sortable top-left-round"><a href="#" class="sortable">Lead Id</a><span></span></th>
<th class="sortable"><a href="#" class="sortable">Create Date</a><span></span></th>
<th class="sortable"><a href="#" class="sortable">Target Group</a><span></span></th>
<th class="sortable"><a href="#" class="sortable">Activity</a><span></span></th>
<th class="sortable"><a href="#" class="sortable">Type</a><span></span></th>
<th class="sortable"><a href="#" class="sortable">Last Update</a><span></span></th>
<th class="sortable"><a href="#" class="sortable">Close Date</a><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"><a href="#" class="view-btn"></a></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"><a href="#" class="view-btn"></a></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;
}