PDA

View Full Version : Resolved IE transparency conflicts



mikka23
04-12-2009, 06:38 PM
Hi, I am having some trouble getting transparency to work in IE. It works perfectly in FF. I have a content fader which shows a picture with a span absolutely positioned over the top and semi transparent. Problem is the transparency of the span seems to conflict with the 100% opacity needed in the css for the javascript fader to work. Here is the relevant code:


.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
background: white;
z-index:1;
width: 618px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.contentdiv{
position:relative;
}
.contentdiv span{
position:absolute;
width:598px;
padding:10px;
bottom:0;
left:0;
background-color:#000;
color:#fff;
z-index:2;
filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;
}
.contentdiv span a, .contentdiv span a:visited, .contentdiv span a:hover{
color:#fff;
text-decoration:underline;
}



<div id="s3slider">
<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
<img src="images/shake.jpg" alt="shake" /><span>Added new services and products - <a href="">read more</a></span></div>

<div class="contentdiv">
<img src="images/money.jpg" alt="shake" /><span>Great new template which you can buy - <a href="">read more</a></span></div>

<div class="contentdiv">
<img src="images/laptop.jpg" alt="shake" /><span>Will be integrated into joomla at some point in the future - <a href="">read more</a></span></div>

<div class="contentdiv">
<img src="images/city.jpg" alt="shake" /><span>Check out my other products on themeforest.net - <a href="">read more</a></span></div>

<div class="contentdiv">
<img src="images/book.jpg" alt="shake" /><span>Added new services and products - <a href="">read more</a></span></div>
</div>
</div>


You can see a live preview of it in action at: http://freecss.info/businessjoomla.

If I remove
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100); the spans opacity works as it should, the fade transitions on the slider does not however.

Really appreciate the help.