...

View Full Version : Resolved IE transparency conflicts



mikka23
04-12-2009, 07: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum