Background image position wrong in IE; no problem other browsers

[ovivtopher]

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; }

[Senff]

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

[ovivtopher]

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.

[ovivtopher]

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; }

[ovivtopher]

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 :)

[Author]

Posts