I have a td inside it I have a relatively positioned div. Inside the div there is an img and a ul. The img is positioned absolutely. The height of the div therefore depends on the height of the ul. The height of the img depends on the height of the div. This works great in FF 3.6. However, the absolute positioned img disappears in IE 7. I do not float anything. What is causing this?
CSS code:
[CODE]
#navLinksTD
{
padding:0px;
margin:0px;
}
#navLinksBoxDiv
{
position:relative;
width:100%;
height:100%;
padding:0px;
margin:0px;
}
#navLinksInBox
{
position:relative;
padding:0px;
margin:0px;
top:5px;
left:5px;
}
#navLinksBg
{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
right:0px;
bottom:0px;
margin:0px;
padding:0px;
}
html code:
[CODE]
<table id=”myTable” width=”222px” cellspacing=”0px” cellpadding=”0px” border=”0px”>
<tbody>
<tr>
<td id=”leftColTopTdImg”><img width=”222px” height=”77px” src=”../leftcol_top.jpg”/>
</td>
</tr>
<tr><td id=”navLinksTD”>
<!–<div id=”navDivContainer”>–>
<div id=”navLinksBoxDiv”>
<img id=”navLinksBg” src=”../menu_combined_2r.jpg”/>
<ul id=”navLinksInBox”>
<li>
<a href=”#”>Driving While Intoxicated</a>
</li>
<li>
<a href=”#”>Sex Crimes</a>
</li>
<li>
<a href=”#”>2nd Driving While Intoxicated</a>
</li>
<li>
<a href=”#”>2nd Sex Crimes</a>
</li>
</ul>
<!–End of navLinksBoxDiv–>
</div>
<!–</div>–>
<img id=”menuBottom” src=”../menu_bottomedge.jpg” alt=”The bottom of the menu” />
<!–End of navLinksTD–>
</td>
</tr>
</tbody>
</table>