IE position:absolute does not work

Forum Moderators: not2easy

Message Too Old, No Replies

IE position:absolute does not work

woody993

9:04 am on Feb 25, 2009 (gmt 0)

I have a div with this applied to it:

#container
{
position:absolute;
top:125px;
bottom:0px;
left:0px;
right:0px;
}

In FF, this makes the div fill the entire window minus 125px at the top. In IE, it squashes up to a couple of pixels and is 125px from the top and 0px from the left.

swa66

9:23 am on Feb 25, 2009 (gmt 0)

Try IE7.js to fix this, it's one of the features of IE6 not to support the setting of both top and bottom or left and right of an absolutely positioned element.

[code.google.com...]

woody993

11:23 am on Feb 25, 2009 (gmt 0)

Sorry, I meant to say that I was using IE7.

And the IE8.js does not seem to affect it.

swa66

12:09 pm on Feb 25, 2009 (gmt 0)

I'm pretty confident IE7 (the browser) does support this without scripted help.

I just tried this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
  <title>untitled</title>
  <style type="text/css">
   * {
    padding: 0;
    margin: 0;
   }
   #container {
    position:absolute;
    top:125px;
    bottom:0px;
    left:0px;
    right:0px;
    background-color: teal;
   }
  </style>
<!--[if IE 6]>
  <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" 
  type="text/javascript"></script>
<![endif]-->
 </head>
 <body>
  <div id="container">
   Hello World!
  </div>
 </body>
</html>

And my IE7 does it as expected, and the script helps IE6 do the same ...

Do you find a difference with what you had ?

woody993

12:51 pm on Feb 25, 2009 (gmt 0)

I just kept playing around and managed to fix it.