Absolute position in IE

[williamrouse]

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.

[Wickham]

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:-

 

.................

 

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.

Edited December 23, 2008 by Wickham

[williamrouse]

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.

[Wickham]

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.

br />   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">







Test

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






Inner div

Inner div

Inner div