Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Background image position wrong in IE; no problem other browsers

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #38194
    ovivtopher
    Member

    I’ve validated all my code with W3C and can’t get IE to position background image correctly. Works fine, at bottom of page, in Chrome, FF and Safari. In IE 8/9 it stays on top 1/3 of page no matter what I do with position statement. In earlier versions of IE it also stays on top 1/3 AND drops the nav menu down behind the tagline heading. Here’s the beginning of the code, you can access the test site at http://www.bluelotus-consulting.com/test5-22-12/index.html

    /* CSS Document */

    /* Reset */

    /* Global */

    body {font-size: 16px; font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif; line-height: 1.5; background-image: url(../images/flower_back.jpg); background-position: bottom right; background-repeat: repeat-x; background-color: #FFF; }

    /*Containers*/

    #outer { width:960px; margin:0 auto; background-color: transparent; }

    #logo {margin: 0px 25px 0px 0px; float: left; }

    #103398
    Senff
    Participant

    Add overflow:hidden; to #outer to clear floats. You also might want to remove the background color of it, not sure.

    #103402
    ovivtopher
    Member

    That’s a fix for IE 8 and 9 without changing the background color! Yea! IE 7 and below the image is moved to the right position, and I changed the background color to transparent in the #outer div. So the image is now working fine in all versions of IE, Chrome and Safari (I have yet to check FF).

    The only remaining problem is that in IE7 and below, the nav menu and it’s borders drop below the tag line, so it’s unreadable and unaccessible. I can live without fixing this, if I have to.

    #103403
    ovivtopher
    Member

    Oh, I also had to change the background-position to bottom, from bottom-right in order for Chrome to work. Here’s the changed code and link: http://www.bluelotus-consulting.com/test5-22-12/index.html

    body {font-size: 16px; font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif; line-height: 1.5; background-image: url(../images/flower_back.jpg); background-color: #FFF; background-position: bottom; background-repeat: repeat-x; }

    /*Containers*/

    #outer { width:960px; margin:0 auto; background-color: transparent; overflow: hidden; }

    #logo {margin: 0px 25px 0px 0px; float: left; }

    #103474
    ovivtopher
    Member

    Thank you SENFF! The overflow command started it off and now I’m done! See new page at http://www.bluelotus-consulting.com (and code, if interested).

    What a relief! Thanks for the forum, I’m sure I’ll be back :)

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.