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 www.bluelotus-consulting.com/test5-22-12/index.html
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.
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: 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; }
overflow:hidden;to #outer to clear floats. You also might want to remove the background color of it, not sure.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.
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; }
What a relief! Thanks for the forum, I'm sure I'll be back :)