html element background color not showing in IE 8

html css internet-explorer internet-explorer-8 background-color

22,851

Solution 1

The problem is the following property in your CSS:

:focus{
  outline:0;
  background-color:#f2f3f6;
  border-color:#996
}

Apparently, on loading IE8 decides that the html element has focus, whereas other browsers don't do this. Remove the background-color property here and it'll all stay white.

Solution 2

What happens when you insert this code into your HTML?

body div
{
  background-color: white !important;
}

Normally, browsers interpret and apply the last line of CSS that they read to an element, so background-color: red; background-color: blue; would result in a blue background color.

!important tell the browser to ignore all other property re-decelerations, so background-color: red !important; background-color: blue; would make the background color red, even though you told it to be blue.

Solution 3

I think background:#FFFFFF; will fix it. It worked for me.

22,851

Author by

Donald Jenkins

Donald (@donaldjenkins) is a writer and photographer living in New York City. He dabbles in web development and is the co-founder of start-up Policymakr.

Updated on September 21, 2020

Comments

Donald Jenkins over 3 years

I'm using the <body> tag as a wrapper for three divs on a site where every single background color is white.

I've set the background color to #fff for the html and body in the css, and the site is rendering correctly in every browser (including IE 6 and 7) except IE8:

I've even tried setting the style for html directly inline like so: <html style="background-color: #fff"> but that doesn't seem to change anything.

Not even sure what might be causing the bug.
Stephan Muller about 13 years

Do remember though that this is just a means to check whether the background: white gets overwritten. It is bad practice to start using !important everytime a CSS property gets overwritten somewhere. The better way is (after having used !important to determine the problem) to find out where exactly it gets overwritten and then fix that.
Blender about 13 years

I posted this just to see if it works (and if the author hadn't made another !important elsewhere). If I had access to the problematic page, I could just whip out Chrome's Inspector and tell you what rule is overriding the background color and where it is in seconds . But since I can't see the page, I can't help much at all.
Stephan Muller about 13 years

I know, I was just adding to your answer, I even upvoted it. Just pointing out to Donald Jenkins that this is not a permanent fix, just a method of debugging :)
Stephan Muller about 13 years

Yeah, just guessed it was the one from his profile and I encountered the same bug in IE, so I whipped out Chrome's inspector :P
Blender about 13 years

You beat me to it! I actually Google'd the OP, and conveniently found his site. I'd do another +1 for using Chrome's Inspector.
Donald Jenkins about 13 years

@Blender: Thanks for the suggestion! I had tried it, obviously, though I don't like using it for the reason Stephan mentioned. But it didn't work.
Donald Jenkins about 13 years

That did the trick. Totally fixed: http://cl.ly/5K2V. Thank you very much. Now if only I could fix the right-hand sidebar that doesn't display inline in IE6...
Donald Jenkins about 13 years

Also speeded up my site's loading time, from 1.4 seconds to 1.3 seconds: sounds like that property was slowing it down a bit even in browsers that displayed it correctly.
Donald Jenkins about 13 years

His suggestion worked totally and I immediately marked it as accepted: thank you both very much indeed.