html element background color not showing in IE 8

Asked 17/3, 2011 at 21:25 Answered 11/12, 2013 at 10:36

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

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:

Only one of the divs (the central content) is displaying its background color

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.

Bunny answered 17/3, 2011 at 21:25 Comment(3)

Can you give us the code/website address please? – Kirwin 17/3, 2011 at 22:13

Sure: I've posted the css and html for the page here: http://jsfiddle.net/jDmtg/. And to see it in action: http://donaldjenkins.net/. – Bunny 17/3, 2011 at 22:26

Stephan Muller: Thanks for the suggestion. The ones I haven't marked as answered is because, erm, none of the answers provided worked… xD When a suggestion was helpful, I always voted it up. But do let me know if I'm not doing the right thing! – Bunny 17/3, 2011 at 22:28

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.

Shyster answered 17/3, 2011 at 22:13 Comment(4)

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 – Shyster 17/3, 2011 at 22:16

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. – Kirwin 17/3, 2011 at 22:19

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... – Bunny 17/3, 2011 at 22:40

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. – Bunny 17/3, 2011 at 22:57

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.

Kirwin answered 17/3, 2011 at 21:31 Comment(5)

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. – Shyster 17/3, 2011 at 22:9

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. – Kirwin 17/3, 2011 at 22:12

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 :) – Shyster 17/3, 2011 at 22:14

@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. – Bunny 17/3, 2011 at 22:29

His suggestion worked totally and I immediately marked it as accepted: thank you both very much indeed. – Bunny 17/3, 2011 at 22:58

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

Francinefrancis answered 27/9, 2012 at 7:57 Comment(0)

internet explorer support 6digit color code i.e. instead of #fff .. use #ffffff I hope you may understand this

Incorporeity answered 11/12, 2013 at 10:36 Comment(0)

Recommended topics

Hot tags