Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    58
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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; 04-13-2009 at 12:18 AM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •