Grow your CSS skills. Land your dream job.

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

  • # October 25, 2009 at 8:08 am

    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 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 3:21 pm

    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.

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

    # October 26, 2009 at 12:14 pm

    Finally got it working. Thanks for providing the hint!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".