Trouble with CSS, Positioning and IE vs. rest of the world

[iSchack]

Hey there.

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 https://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!

[dcp3450]

to get the page to properly align to the center in IE you will need to position your page-wrap to absolute. You may have to adjust the site accordingly by using position: relative and properly adjusting locations with margins.

[iSchack]

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?

[dcp3450]

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.

[iSchack]

Finally got it working. Thanks for providing the hint!

[Author]

Posts