Hello,
I am having a problem where in IE (the pig) I can not get a transparent background. I may have a problem with my css or a div that I don’t see or understand. I have also read about a bug with IE9 and the wmode=transparent att not working.
Can anyone please help me out here. Thank you.
The HTML
<div id="boxPup" style="left:225px;top:75px;"><!--These styles are needed here for the dragStart js function to get the initial location of the draggable div.--><!--class="box_transparent"-->
<div class="bar" onmousedown="dragStart(event, 'boxPup')">Drag Box B</div>
<div id="swfContainer">
<object id="notUsedId" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="700px" height="550px" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="false" />
<param name="wmode" value="transparent" />
<param name="movie" value="pop_up.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="bgcolor" value="#ff0000" />
<embed src="pop_up.swf" quality="high" scale="noscale" salign="lt" bgcolor="#ff0000" width="100%" height="100%" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</div>
The styles
/**** This is the box that contains the popup SWF. If you change the width x height of the SWF, you must change the width of this box. ****/
#boxPup {
position: absolute;
background-color: #ffffff;
width:700px;
height:520px;
/*color: #000000;*/
padding: 0px;
/***** <<< This is a fix for setting the background transparency, trying to hit all browser preferences. >>>>> */
/* Fallback for web browsers that doesn't support RGBa */
zoom:1;
background-color: transparent;
/**/
background-color: rgb(255,255,255) transparent;
background-color: rgba(255,255,255, 0);
/*background-color: rgb(0, 0, 0);
RGBa with 0.6 opacity
background-color: rgba(0, 0, 0, 0);*/
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff');
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff')";
/*opacity: 0.5;
filter:alpha(opacity=50);*/
}
.box_transparent{
background-color: transparent;
background-color: rgba(180, 180, 144, 0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490);
zoom: 1;
}
/**** This is the transparent dragger bar. ******/
.bar {
position:absolute;
top:59px;
left:22px; /* This is how you control the position of the dragger div from the left */
background-color: #008080;
color: #ffffff;
cursor: move;
width:622px;
padding: 10px 1em 10px 1em;
/******************************************************
These next 3 lines control opacity of the dragger bar. Turn them up to see the bar.
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
*******************************************************/
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
#swfContainer{
background-color: #ffffff;
width:700px;
height:520px;
/*color: #000000;*/
padding: 0px;
/***** <<< This is a fix for setting the background transparency, trying to hit all browser preferences. >>>>> */
/* Fallback for web browsers that doesn't support RGBa */
zoom:1;
background-color: transparent;
/**/
background-color: rgb(255,255,255) transparent;
background-color: rgba(255,255,255, 0);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff');
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff')";
/*opacity: 0.5;
filter:alpha(opacity=50);*/
}
