Home/ Questions/Q 771391
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T18:38:46+00:00

I have an absolutely positioned element at the bottom of a container element. The

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I just found this:
    IE CSS Bug – How do I maintain a position:absolute when dynamic javascript content on the page changes

    It is a workaround, but not ideal for my situation. I’m using jquery’s slideDown() method on ‘test’, so I can only have the bottom piece readjust after the animation is complete, not as it progresses. Not very smooth.

    Anything else?

    • 0