Web Analytics Made Easy -
StatCounter IE transparency conflicts - CodingForum

Announcement

Collapse
No announcement yet.

IE transparency conflicts

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Resolved IE transparency conflicts

    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:

    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>
    You can see a live preview of it in action at: http://freecss.info/businessjoomla.

    If I remove
    Code:
    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.
    Last edited by mikka23; Apr 12, 2009, 06:18 PM.
Working...
X