I have an anchor element inside a table cell. The anchor needs to overlap subsequent cells, but not be visible outside of the table or containing div.
HTML
<div>
<table>
<tbody>
<tr>
<th><span>Volkswagen Crafter CR30 SWB Diesel 2.5 BlueTDI 88PS Van</span> BF60GKK <br>updated 06 dec 17:49</th>
<td>a</td>
<td>z</td>
<td>b</td>
<td>c</td>
<td>y</td>
<td>x</td>
<td><a style="width: 237.5%;left:37.5%" href="#"><span>John Smith, Provisional<br/>09:00 on 12 Dec<br/>18:00 on 14 Dec</span></a></td>
<td>g</td>
</tr>
</tbody>
</table>
</div>
CSS
div {overflow:hidden;display:inline-block;position:relative}
th,td {border:1px solid black; border-collapse:collapse; position:relative; width:50px; }
th {width:150px;}
td.d {background-color:#cdc;}
a {z-index:1000;position:absolute;width:300px;top:15px;left:5px;height:60px;overflow:hidden;background:#fdd;}
This works in Chrome, IE8 and IE9…
But not in IE7…
How can I make this work in IE7?
See working example here http://jsfiddle.net/UrZDw/
Also, IE7 also puts the anchor behind cells which have a background colour. How can I fix this?