Trouble with CSS, Positioning and IE vs. rest of the world
# October 25, 2009 at 8:08 am
I’m developing a website right now and have a problem with (correct) positioning of text/links above an image.
To see what I’m talking about, please feel free to visit http://www.devilcow.de (it’s my domain for testing, not the final one :) ).
I want to use the image of that cozy living room as background graphic for my main menu. I inserted the text/links with Chris’ little trick from http://css-tricks.com/text-blocks-over-image/.
This is what it shall look like, once it’s done: http://www.devilcow.de/wp-content/theme … s/menu.jpg
That does work amazingly well in Firefox, Safari and Opera – howeve, Internet Explorer, even in Versino 8, doesn’t get it right. With Internet Explorer the links appear, I assume, in a position relative to the left/top of the browser window, and not relative to the left/top of the div which contains these links…
(Apart from this little problem, it also doesn’t place the footer where it belongs. But I think I’ll get that fixed on my own).
I guess this has something to do with absolute/relative positioning… but I can’t figure out how to correct this…
Does any of you guys have and idea how to persuade Internet Explorer to place those texts/links where I want them to have? My CSS-File can be found here: http://www.devilcow.de/wp-content/themes/ksk/style.css
Thanks in advance!# October 25, 2009 at 4:44 pm
Thanks. Using "position:absolute;" in my #page-wrap really did fix the IE problem… well, by putting the whole content to left. Which is what one would expect from position:absolute in this case.
However, I don’t really see how I can place the content in the horizontal center of the page again… The margin is already set to "margin: 0px auto;".
I can of course get it into the middle by using %-values. But then it will, of course, only be centered on displays with the same resolution I have.
I guess the solution is probably too obvious to see… Would you mind helping me out?# October 25, 2009 at 10:57 pm
when I put #page-wrap to position:absolute it centers the whole thing for me. I’m using IE 7.
The issue you may be having is position: absolute wants you to position the page using "left, right, top, bottom" switch the position to relative. I got the same result and the content seemed to react better as well.
You must be logged in to reply to this topic.