Jump to content
Stef's Coding Community
williamrouse

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

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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">







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






Share this post


Link to post
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.

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

Loading...

×
×
  • Create New...