Disappearing/Reappearing Backbround Image in Div tag in IE8

So I’ve had an issue pop up a couple of times and it was a frustrating problem to track down so I thought I’d post the behavior/fix. The issue that was occurring for me was in seaminly random circumstances a “background-image” would disappear from a div tag and then reappear on mouse over or on mouse click of the Div (this works in IE7, FireFox, Chrome & Safari). Examine the following code which causes the problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <%-- Banner --%>
    <div class="banner" style="background-image: url(/IQ/FiscalTimeTracker/Images/banner.jpg);">
    </div>

After trying everything I could think of to get the image to display through CSS I ran into a dead end. Then I tried something just trial and erroring different approaches. I changed the DOCTYPE from XHTML 1.0 to HTML 4.0. Sure enough, this fixed the problem. The background on the div tag stayed 100% of the time and on all browsers. I’m not sure why this is the case but this approach does fix the behavior. Below is the updated snippit from above with the new DOCTYPE that fixes the problem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <%-- Banner --%>
    <div class="banner" style="background-image: url(/IQ/FiscalTimeTracker/Images/banner.jpg);">
    </div>

Please note that we won't show your email to others, or use it for sending unwanted emails. We will only use it to render your Gravatar image and to validate you as a real person.

Leave a comment