EDITED: this first version was a false example with false assumptions! See below for new version!
The Setting:
I have 2 absolute positioned divs:
<div class="menuSubBack"> </div>
<div class="menuSub">
<ul>
<li>test1</li>
<li>test2</li>
</ul>
</div>
with the following styles:
<style type="text/css">
.menuSub
{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
overflow: auto;
color: #FFFFFF;
font-size: 8pt;
z-index: 99 !important;
}
.menuSub ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
.menuSub ul li
{
text-align: center;
line-height: 25px;
height: 25px;
font-size: 12px;
}
.menuSubBack
{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
overflow: hidden;
z-index: 1 !important;
background: #00FFFF;
}
</style>
The problem:
The "menuSub" div has auto generated li tags. The "menuSubBack" later gets javascript generated svg content that needs to get a height to be drawn correctly. You probably already guessed that I need those 2 divs in the same height. I tried to achieve this with jQuery but .height(), .innerHeight() and .outerHeight() all return 0, even for the ul inside the "menuSub" div. Is there any way of getting the correct height? (apart from counting the li elements and sum up fixed heights)
EDIT: The example previously seen Is not the correct Problem, so here follows a full sized copy/paste example:
<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
.menuSub
{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
overflow: auto;
color: #FFFFFF;
font-size: 8pt;
z-index: 99 !important;
}
.menuSub ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
.menuSub ul li
{
text-align: center;
line-height: 25px;
height: 25px;
font-size: 12px;
}
.menuSubBack
{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
overflow: hidden;
z-index: 1 !important;
background: #00FFFF;
}
.menuHover
{
position: absolute;
top: 20px;
left: 20px;
width: 100px;
z-index: 10;
display: none;
overflow: visible;
}
</style>
<script type="text/javascript">
$(document).ready(
function()
{
$("#targetDiv").height($("#sourceDiv").height());
$("#hoverDiv").fadeIn("fast");
}
);
</script>
</head>
<body>
<div id="hoverDiv" class="menuHover">
<div id="targetDiv" class="menuSubBack"> </div>
<div id="sourceDiv" class="menuSub">
<ul>
<li>test1</li>
<li>test2</li>
</ul>
</div>
</div>
</body>
</html>
So the real problem seems to be, that targetDiv and sourceDiv reside inside the hoverDiv which is not visible when loading the page and thus do not get correctly calculated.