PDA

View Full Version : IE 8 issue with CSS Background


dbepp
09-22-2011, 05:16 PM
I am having an issue with IE 8 not displaying my background as specified in CSS. It will quickly flash on the screen while loading but quickly disappears leaving a white background.
This is not an issue in any other browser or version of IE.

Any suggestions on how to fix this problem?

http://www.odysseynashvillerecords.com (http://www.odysseynashvillerecords.com/)


And I just noticed I posted this in Dreamweaver General instead of the HTML and CSS forum. I apologize but I'm not sure how to move this thread.

gentleone
09-22-2011, 06:14 PM
In brandonscottsmith.css, style.css and on the page itself you declare all kinds of styles on the background property. A couple of times its just background and then somewhere else background-image. You might want to sort this out, because it could be that the background image doesn't override the background color in IE8. Don't ask me why... IE can do real crazy things.

dbepp
09-22-2011, 06:52 PM
The style.css is for the nivo-slider.. I removed the background and image properties just to be sure there isn't a conflict.. but that didn't do the trick.

The css on the page is the same as that on the external sheet brandonscottsmith.css... I know it's redundant, but if I remove the css on the page, then the background doesn't show up on any browser for the index page..

Not sure what's going on because it's working on all other pages!?

gentleone
09-22-2011, 07:33 PM
hmmm... weird... I had a look, but no luck so far... there are quite some validation errors on your page, but they're likely not the cause of the problem (most of the errors are in that image rollover javascript).

IE8 itself gives an error as well, but I beleieve this has also nothing to do with the issue.
Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Timestamp: Thu, 22 Sep 2011 19:32:22 UTC

Message: The XML script engine does not support script fragments. This error was probably caused by having a script tag with the language attribute set to "XML" or the text attribute set to "text/xml" before any other script tag on the page.

Line: 69
Char: 1
Code: 0
URI: http://www.odysseynashvillerecords.com/

dbepp
09-22-2011, 07:42 PM
Perhaps I will rebuild the index page beginning with the core of another page that is working.. I hate to waste all this time and effort for something that seems to have an easy fix. And I'll look into the error.. not sure if it will have an effect his audience.

dbepp
09-22-2011, 09:07 PM
So I have checked, double checked and then checked again... all my css properties are in correct order (as IE8 is extremely strict), there is nothing usurping the bg image.. and that others are having an issue with this as well.
This is going to drive me crazy! There must be a simple fix..

gentleone
09-23-2011, 01:58 PM
I looked at the source of the about page and I see that there you have only brandonblabla.css, so the conflict on the home page is coming from one of the other styleheets. To check from which one is to comment them all out and turn them one by one on by removing the comment tags.

By the way, I see (In firefox 6 mac) on your homepage the background image (bg_final.jpg) twice only one is overlapping the other with around about 150px on the left of the screen

Another thing I've noticed, but not related to your issue, is that at the top of styles.css you use a css reset and this is good, but a css reset should be the first styles a browser should parse. What you do now is for instance setting all the margins and paddings you've declared in the previous stylesheets on your divs or heading tags back to zero.

dbepp
09-23-2011, 02:07 PM
thanks for the info! I haven't been doing this very long so I appreciate your help..
Last night I added a wrapper div and added the bg to that... which seems to be working (kinda), but as you commented..leaves the bg twice on the homepage.
However, I'd prefer not to go this route as it also shifts everything a few pixels to the right. So I'll comment each css out until I find the issue.
Thanks and I'll post the fix

gentleone
09-23-2011, 02:30 PM
Give me a bit and I'll show you how I would layout your pages with that background image.

dbepp
09-23-2011, 06:16 PM
Give me a bit and I'll show you how I would layout your pages with that background image.

That would be much appreciated.. I'm always learning

gentleone
09-23-2011, 06:25 PM
Okay... Firefox 6 on the Mac is my production browser, but I checked it in IE8 and it looks and behaves how it should be.

The way you had the background it didn't fit to my browser window (1440px width resolution), so it gave a white space on the right.

We could solve this by using a new CSS3 property, the background-size, but this won't work in IE. I did it with keeping the background images (from header and main) in the HTML and size them to 100% in the CSS, which work pretty much in every browser. The downside is that they are in the HTML while they are images that belong to the design... but sometimes to get browser consistancy I'll break the rules :)

Here you go: http://www.gentlemedia.nl/brandon/

dbepp
09-23-2011, 06:37 PM
Awesome.. I'm not hip to CSS3 but would I add something like
#body {
background-size: 100%;
}
in order to get it to stretch 100% of any screen resolution? Is there an extension so that I can see your css for the page? (I edited this.. I think its css.styles)
Also, the only reason why it's working in IE8 on my site is because I added a div around my container with the dimensions of the bg and added it.

gentleone
09-23-2011, 06:55 PM
Awesome.. I'm not hip to CSS3 but would I add something like
#body {
background-size: 100%;
}

No, it would then be something like this:

body {
background-image: url(background.jpg);
background-size: cover;
background-attachement: fixed;
}
Here is some useful info about the background-size property:
http://www.netmagazine.com/tutorials/take-advantage-css-background-size-property

in order to get it to stretch 100% of any screen resolution? Is there an extension so that I can see your css for the page? (I edited this.. I think its css.styles)
I'm not sure what you mean, but I can zip it all up for you and give you a link for download.

dbepp
09-23-2011, 07:00 PM
Great link! And I can see the css you used by going to http://www.gentlemedia.nl/brandon/css/styles.css
... I'm new to this but, again, love to learn.
Thanks so much for your assistance!

gentleone
09-23-2011, 07:10 PM
You're welcome, dbepp! :)

You might scratch at the back of your head while looking at some of the css of mine, but don't hesitate to ask and I'll explain.