Jump to content

Absolute position in IE


Recommended Posts

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



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

Link to comment
Share on other sites

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 by Wickham
Link to comment
Share on other sites

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


<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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...