I'm trying to get expanding tables to work using only css and am having trouble with Safari. The code below presents a 2 row table with the second row hidden until hovering the first row. All works fine in FireFox but Safari 2.0.4 Mac increases the height of the table by a couple pixels every time you roll over. It appears like the table is moving down on the page.
I've tried every combination of border, padding, etc I can think of.
Could this be a bug in Safari?
Paul
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Expanding Tables using CSS</title>
<style type="text/css">
body {
background-color:#faf;
}
.Table {
border:1px solid #fff;
padding:0px;
margin:0px;
background-color:blue;
border-spacing:0px;
border-collapse:collapse;
}
.HiddenRow{
visibility:hidden; /* put this to visible to watch table height grow on multiple rollovers */
background-color:#ddd;
position:absolute; /* collapses table row so element below will move up */
padding:0px;
margin:0px;
border:none;
height:19px;
background-color:red;
}
.VisibleRow {
padding:0px;
margin:0px;
border:none;
height:19px;
background-color:yellow;
}
#TableName{
background-color:#fff;
text-decoration:none;
}
#TableName:hover .HiddenRow {
background-color:#aaa;
visibility:visible; /* shows the table row */
position:relative; /* makes it take up space in the flow */
}
#TableName:hover .VisibleRow {
position:relative;
margin:0px;
background-color:#999; /* to make testing easier */
}
#TestBox { /* used to test table row collapse */
padding:10px;
width:500; height:20;
background-color:#ddd;
}
</style>
</head>
<body>
<table id="TableName" class="Table">
<tbody>
<tr class="VisibleRow">
<td><a href="#">Johnny</a></td>
<td>Onthespot</td>
</tr>
<tr class="HiddenRow">
<td></td>
<td>This is extra information about Johnny</td>
</tr>
</tbody>
</table>
<div id="testbox">This is another div wrapper below the table</div>
</body>
</html>