- This topic is empty.
-
AuthorPosts
-
May 23, 2012 at 11:22 pm #38194ovivtopherMember
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; }
May 24, 2012 at 8:36 am #103398SenffParticipantAdd
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 #103402ovivtopherMemberThat’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 #103403ovivtopherMemberOh, 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 #103474ovivtopherMemberThank 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.