Collecting the Internet So You Don't Have To

We work on the Internet. As such, we are constantly consuming information. Believe me, there is a lot of it out there. Sometimes we even forget things unless we write them down. Our blog covers everything from web standards to the muppets, php to comic books, music and everything else that we find interesting. Leave us a note when you drop by.

Background Image Bug in Internet Explorer 8

Design
Ross McDowall
Ross McDowall Senior Web Developer
Visual Lizard
work
1 (204) 957-5520 ext:151
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Ross McDowall Fearless Dwarven Warrior

I am working on specific styling for a site in Internet Explorer 7 and 8. Our designer has provided a list of styling adjustments that need to be addressed specifically for these browsers. One of the issues we ran across is that the background image tile for the body was glitchy rendering where the background for the body would only appear if we were to resize the window or if we were to hover on the odd item.

I went looking to see if there was a bug or issue specifically for IE8, and sure enough I found several examples described throughout my search. The following CSS code works in WebKit browsers, Mozilla browsers, and Internet Explorer 7:

body {
    background: #b7b3a4 url("../../img/bg_generic.png") repeat-y center top;
}

Sadly, IE8 has a bug that requires the parent element be specific to HTML and not the BODY of the document. Normally we keep to a general rule that the HTML element does not contain any styling. We usually consider it just the container for the rest of the document.

However, in this particular case the fix for the disappearing background tile on the body is to apply that background to the HTML element instead.

html {
    background: #b7b3a4 url("../../img/bg_generic.png") repeat-y center top;
}

It's not a nice fix as the browser should be able to handle this css. However, we apply this particular fix into an ie8hacks stylesheet so that it only applies when the HTML code recognizes the browser. Just a friendly little reminder that you still have to hack a bit for Internet Explorer.