- This topic is empty.
-
AuthorPosts
-
May 23, 2012 at 11:22 pm #38194
ovivtopher
MemberI’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; }
May 24, 2012 at 8:36 am #103398Senff
ParticipantAdd
overflow:hidden;
to #outer to clear floats. You also might want to remove the background color of it, not sure.May 24, 2012 at 10:50 am #103402ovivtopher
MemberThat’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.
May 24, 2012 at 10:52 am #103403ovivtopher
MemberOh, 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; }
May 25, 2012 at 11:33 am #103474ovivtopher
MemberThank 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 :)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.