I am attempting to create a menu using <div> and <span> tags within a
table cell. When the page loads, some of the classes don't seem to be
applied. If I hover over the menu everything is fine from that point
on. If I remove the table everything renders correctly, and I have no
problems. Unfortunately, I need to nest this menu within a table. I
am currently having this problem in IE 6. Thanks in advance for the
help!
<html>
<style type="text/css">
.menu .aa { width: 5px; float: left; border-bottom: 1px solid
#000; background: #bcd; }
.menu .bb { float:left; padding:2px 0 2px 0; border-bottom:1px
solid #000; border-top:1px solid #000; background:#bcd;
text-align:center; }
.menu .sela { width:5px; float:left; background:#fff;
font-size:1em;}
.menu .selb {float:left; padding:2px 0 2px 0; border-top:1px solid
#000; background:#fff; color:#f00; font-size:1em;}
.menu .va {width:1px; float:left; border-top:5px solid #fff;
background:#000; overflow:hidden;}
.menu .vb {width:1px; float:left; height:1px; background:#ccc;
border-top:2px solid #fff; border-bottom:2px solid #000;
overflow:hidden;}
.menu .vc {width:1px; float:left; height:1px; background:#ccc;
border-top:1px solid #fff; border-bottom:1px solid #000;
overflow:hidden;}
.menu .vd {width:2px; float:left; height:1px; background:#000;
border-top:1px solid #ccc; overflow:hidden;}
.menu a, .menu a:visited {color:#444; text-decoration:none;
font-size:1em; cursor:pointer; cursor:hand; background:#c88;}
.menu a:hover {color:#c00; background:#def;}
.menu a:hover .aa, .menu a:hover .bb {background:#def;}
.pad {float:left; color:#fff;}
.padtop {float:left; display:block; padding:0 5px;}
* html .menu .vb {height:5px; he/ight:1px;}
* html .menu .vc {height:3px; he/ight:1px;}
* html .menu .vd {height:2px; he/ight:1px;}
</style>
<body>
<table>
<tr>
<td>
<div class="menu">
<span class="sela">
<span class="va"></span>
<span class="vb"></span>
<span class="vc"></span>
<span class="vd"></span>
</span>
<span class="selb">By Visit</span>
<span class="sela">
<span class="vd"></span>
<span class="vc"></span>
<span class="vb"></span>
<span class="va"></span>
</span>
<a href="#">
<span class="aa">
<span class="va"></span>
<span class="vb"></span>
<span class="vc"></span>
<span class="vd"></span>
</span>
<span class="bb">Overview</span>
<span class="aa">
<span class="vd"></span>
<span class="vc"></span>
<span class="vb"></span>
<span class="va"></span>
</span>
</a>
<a href="#">
<span class="aa">
<span class="va"></span>
<span class="vb"></span>
<span class="vc"></span>
<span class="vd"></span>
</span>
<span class="bb">By ID</span>
<span class="aa">
<span class="vd"></span>
<span class="vc"></span>
<span class="vb"></span>
<span class="va"></span>
</span>
</a>
</div>
</td>
</tr>
</body>
</html>
