I have an absolutely positioned element at the bottom of a container element. The problem is that the content of the container changes dynamically (javascript). In FF it still works fine, but IE7 (didn't test any others) seems to calculate the position of the element relative to the top of the container on page loading, and then doesn't update it.
examples:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he">
<head>
</head>
<body>
<div style="position:relative;"
onmouseover="document.getElementById('test').style.display='block'"
onmouseout="document.getElementById('test').style.display='none'">
rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
<div id="test" style="display:none;">
rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
</div>
<div style="position:absolute;bottom:0;background-color:blue;">
rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
</div>
</div>
</body>
</html>
and the opposite:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he">
<head>
</head>
<body>
<div style="position:relative;"
onmouseover="document.getElementById('test').style.display='none'"
onmouseout="document.getElementById('test').style.display='block'">
rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
<div id="test" style="display:block;">
rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
</div>
<div style="position:absolute;bottom:0;background-color:blue;">
rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
rufaurhf refhwrew regfnwreug wurwsuref erfbw rebvwsrefg</br>
</div>
</div>
</body>
</html>
Any ideas/workarounds?