white background problem in IE

Open up this site in IE8:

http://www.bavarianblue.com

See the white background? Any ideas what is causing that? I tried assigning a clear gif to it, and nothing changed. Works great in Chrome a开发者_运维问答nd FF

Help please : )

If you use the Developer Tools in IE8 (Keyboard shortcut F12) and inspect the element with the white background you will notice the following inline style applied to the element:

<div class="slide" style="z-index: 5; position: absolute; background-color: #ffffff; zoom: 1; display: block; top: 0px; left: 0px;" cycleH="277" cycleW="500" jQuery1285163831375="11">

What is generating the HTML for you? I assume it's JQuery UI?

In IE the <div class="slide"> gets a style="background-color:#fff;". This is a fix for IE to make the fade transition text smooth and not jagged. Find where the color is being set and replace it with your bg color (probably in the .js or where you call the slide plugin)

I have investigated and come to a solution

#spotlight .slide{
 background: url("images/featured_bg.png");
}

On your <div class="slide"> set the background-color: Transparent

the first div in #spotlight has a backgound-color:#ffffff; set as inline-style (which can easily be seen by using the developer-tool (F12)) - remove that and you'll get what you expect.

Little later but something that worked for me dealing with IE8 background issues:

selector{
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)" !important; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF) !important;   /* IE6 & 7 */      
    zoom: 1;
}

Make sure to adjust the filter hex color if you want a color (remove the "00" if you are not wanting a transparent result