css style "bottom:0" in dynamic <div>
Posted
by baruch
on Stack Overflow
See other posts from Stack Overflow
or by baruch
Published on 2010-05-03T20:55:29Z
Indexed on
2010/05/03
20:58 UTC
Read the original article
Hit count: 210
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?
© Stack Overflow or respective owner
