IE7 relative/absolute positioning bug with dynamically modified page content

Posted by Matthias Hryniszak on Stack Overflow See other posts from Stack Overflow or by Matthias Hryniszak
Published on 2010-03-18T20:34:01Z Indexed on 2010/03/18 20:41 UTC
Read the original article Hit count: 474

Filed under:


I was wondering if there's anyone having an idea how to tackle with the following problem in IE7:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

<html xmlns="">
    <title>IE7 absolute positioning bug</title>
    <style type="text/css">
      #panel { position: relative; border: solid 1px black; } 
      #spacer { height: 100px; } 
      #footer { position: absolute; bottom: 0px; }
    <script type="text/javascript"> 
      function toggle() { 
        var spacer = document.getElementById("spacer"); 
        var style = "block"; 
        if ( == "block" || == "") { 
          style = "none"; 
        } = style;
    <div id="panel">
      <button onclick="toggle();">Click me</button>
      <br /><br /><br />
      <div id="spacer"></div>
      <div id="footer">This is some footer</div>

When you run this in IE7 you'll see that the "footer" element stays after modifying the CSS for "panel". The same example tested in IE8, FF and Chrome behaves exactly as expected.

I've already tried updating the element's class but this does not work if the browser's window has been opened maximized and no further size changes were made to the window (which is about 90% of the use cases we have for our product.... :( ) I'm stuck with a CSS-based solution however I think that I can make an exception in this case if it can easily be made IE7-specific (which means that other browsers will behave in a standard way with this).

Please help!

© Stack Overflow or respective owner

Related posts about css

Related posts about ie7