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:
You can see a live preview of it in action at: http://freecss.info/businessjoomla.
If I remove
the spans opacity works as it should, the fade transitions on the slider does not however.
Really appreciate the help.
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; }
Code:
<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>
If I remove
Code:
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
Really appreciate the help.