williamrouse Posted December 23, 2008 Report Share Posted December 23, 2008 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. Quote Link to comment Share on other sites More sharing options...
Wickham Posted December 23, 2008 Report Share Posted December 23, 2008 (edited) 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 Quote Link to comment Share on other sites More sharing options...
williamrouse Posted December 23, 2008 Author Report Share Posted December 23, 2008 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. Quote Link to comment Share on other sites More sharing options...
Wickham Posted December 23, 2008 Report Share Posted December 23, 2008 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.