Blog for June 2011

Daily Links

Daily Links

Daily Links

Daily Links

Daily Links

Daily Links

Daily Links

Background Image Bug in Internet Explorer 8

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. 

Daily Links

Daily Links

Daily Links

Daily Links