• Registered: December 23, 2008
  • Posts: 119

Topic: Absolute position in IE

I posted this note earlier today but I don’t see it in the new forum.
I have a problem with absolute position with IE:  This CSS class works with all the browsers I have tested with except IE.
Browser  Version:
IE       7.0.5730.13
FF       3.05
Safari   3.2.1
Crome    1.0.154.36

.credits {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 15px;
left : 80px;
color: #000;
background-color: #FFFFFF;
}

With IE, the class is rendered right below the last container not at the bottom of the parent container as I planned.

Thanks in advance.

Vote up Vote down

  • From: Salisbury UK
  • Registered: December 20, 2008
  • Posts: 1,331

Re: Absolute position in IE

Position: absolute divs take positions from the corners of the screen unless the container they are inside has position: relative when they take position from the corners of the div or other element with position: relative. Usually top left positions but in your case bottom and left so try:-

<div id="container">
<div class="credits">.................</div>
</div>

and a new style (or add the style to your existing container)
#container { position: relative; }

Having said that, bottom positions can be difficult so we might need to see your whole code if it doesn't work.

Last edited by Wickham (December 23, 2008 3:01 pm)

Vote up Vote down

  • Registered: December 23, 2008
  • Posts: 119

Re: Absolute position in IE

When I change the parent container to “position relative” , the position changes in all browser but IE.  In this small case I don’t mind the notion that absolute divs take the position from the corner of the screen.  The problem as I see it is that IE ignores the idea of what to do with absolute position.

Vote up Vote down

  • From: Salisbury UK
  • Registered: December 20, 2008
  • Posts: 1,331

Re: Absolute position in IE

That's strange; I tested the following in IE7 and Firefox and the pink div is near the bottom of the container as it should be in IE7. Iwould expect IE6 to be the same.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta name="keywords" content="Wickham"/>                
<meta name="description" content="Test items"/>            
<meta http-equiv="content-type" content="text/html;  charset=iso-8859-1"/>
<title>Test</title>                  

<style type="text/css">
#wrapper { position: relative; background-color: blue; width: 500px; height: 500px; }
#inner { position: absolute; left: 80px; bottom: 15px; background-color: pink; width: 200px; height: 100px; }
</style>

</head>
<body>

<div id="wrapper">
<div id="inner">
Inner div<br />
Inner div<br />
Inner div<br />
</div>
</div>

</body>
</html>

Vote up Vote down