Hi. When it comes to css, I am still at the cut/paste stage and don't yet understanding everything that is going on -- but I'm learning. I have an issue with IE8 not understanding my website\s background code. After reading a post on this forum, it seems I may be having hidden overflow issues. I use a css code to stretch my backgrounds. In the section that goes in the body, there is an "If IE6 then...hide the overflow" section. Do I need to do the same thing for IE8 then? I would appreciate any advice you care to give on the subject. In the <head> section I have: body{margin:0px;padding:0px;background:#000 url("") 100% 0; background-attachment:fixed; color:#ffcc66 ;font:1.0em "Verdana",Trebuchet,Verdana,Sans-Serif;} #page-background {position:fixed; top:0; left:0; width:100%; height:100%;} #content {position:relative; z-index:1; padding:0px;} Code (markup): And in the <body> section it looks like this: <!--[if IE 6]> <style type="text/css"> html {overflow-y:hidden;} body {overflow-y:auto;} #page-background {position:absolute; z-index:-1;} #content {position:static;padding:10px;} </style> <![endif]--> Code (markup): Thanks.
<!--[if IE 8]> <style type="text/css"> CONDITIONS FOR IE 8 </style> <![endif]--> These are called conditional comments, check them out here: http://www.quirksmode.org/css/condcom.html
Unfortunately, this did not solve our problem. I inserted the code above into my Blogger, classic template, and IE8 users are still just seeing the background, and must scroll down an entire page to get to the content. Like this http://1.bp.blogspot.com/_sxj8vhGdJ6M/SsTa18TLCzI/AAAAAAAACiY/GBs2zYADRJY/s1600-h/pics+sep+09+164.jpg (sorry, I am not allowed to post live links here...) To be precise, I am attempting to use code that stretches the background image. It works in IE6, in Firefox and in Chrome...not IE8 My body code is: body{margin:0px;padding:0px;background:#000 url("") 100% 0; background-attachment:fixed; color:#ffcc66 ;font:1.0em "Verdana",Trebuchet,Verdana,Sans-Serif;} #page-background {position:fixed; top:0; left:0; width:100%; height:100%;} #content {position:relative; z-index:1; padding:0px;} the conditional comments are: <!--[if IE 6]> <style type="text/css"> html {overflow-y:hidden;} body {overflow-y:auto;} #page-background {position:absolute; z-index:-1;} #content {position:static;padding:10px;} </style> <![endif]--> and <!--[if IE 8]> <style type="text/css"> html {overflow-y:hidden;} body {overflow-y:auto;} #page-background {position:absolute; z-index:-1;} #content {position:static;padding:10px;} </style> <![endif]--> the actual background image I am stretching is: <div id="page-background"><img src="http://lh3.ggpht.com/_FTgIyhkbOSc/Sft4qI2vz8I/AAAAAAAAAVc/Ffsp0DuGfPU/s800/blog_wiseback.jpg" width="100%" height="100%"> </div> The only thing I can think of is maybe there is no need for 2 instances for the <![endif]--> script? I dunno. But at any rate, IE8 is causing me loads of trouble. Please offer other solutions. Thank you much.
Hi, There's very rarley a need to actually use conditional comments if at all ever. Especially with IE8, which does have it's problems, but shouldn't need to be hacked around. It's usually IE6 maybe IE7 that we need to use them for. I'm confused at why you're using < and > in parts of your code. These should only need to be used if you want to represent a < or > on your page, or if you need to encode a URL of some sort.. When coding you do not use these, you simply use < and > so <div> <!--Comment--> etc... not %lt;div> What effect are you trying to achieve when you say "stretch" the background image. There's no way to stretch a background image using CSS2, the only thing you can do is stretch an actual image, and throw it in the background as if it's a background. But then the image would become distored anyway, so I can't see why anybody would want to do this. The site looks completley different in Firefox and all versions of IE by the way so I think you have more issues than just the background image.
Hi again. Yes, I do use proper < and > when coding, I only assumed that this forum, like blog posts and some forums would not accept <> as simple type so I used the funky < thing. Go ahead and ignore that. I am using the background stretch hack because I currently do not have a place to store image files large enough to use as background images. Long story. I am using Picasa Web Albums for my image storage but they shrink everything down, making it tough to just link up my background with something simple like... body {background:url("http://www.blah.com/blah.jpg") 100% 0;background-attachment:fixed... etcetera. That particular code was great for all browsers, but like I said, I no longer have somewhere to store large background images. Personally, I have not used IE since Firefox came out. I didn't even know there was a problem till a friend using IE said "Hey, why is it that I have to scroll down a page to find the content?" So, IE8 seems to disapprove of this code in my head section: body{margin:0px;padding:0px;background:#000 url("") 100% 0; background-attachment:fixed; color:#ffcc66 ;font:1.0em "Verdana",Trebuchet,Verdana,Sans-Serif;} #page-background {position:fixed; top:0; left:0; width:100%; height:100%;} #content {position:relative; z-index:1; padding:0px;} followed by this in my body section: <div id="page-background"><img src="http://lh3.ggpht.com/_FTgIyhkbOSc/Sft4qI2vz8I/AAAAAAAAAVc/Ffsp0DuGfPU/s800/blog_wiseback.jpg" width="100%" height="100%"></div> If you have any ideas what I can do to make IE accept it, or perhaps a better code for displaying a background image, I would appreciate it.
I just reread this part. Exactly. That is what I have done and it is fine for my needs. The distortion is not enough for me to be bothered by. It is a background image after all.
Ok guys. Sorry but the IE8 conditional comment did nothing. It worked in IE6, but 8 has some extra evil in there that I cannot deal with. Why Firefox, Chrome and Safari and fine with it, but IE isn't is just a tribute to MS wack-ness. What I did was to go BACK to the original html background image code, and hosted my background image on Blogspot. Not perfect, but everything works now. Thanks for your comments.