Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Opacity in IE

Discussion in 'Website Design Forum:' started by chrismitchell, Nov 20, 2009.

  1. Has anyone managed to do this successfully? I can't get it to work at all even with the progid: DXImageTransform.Microsoft.Alpha(opacity=value) technique ...

    anyone got any other suggestions?
     
  2. Harry

    Harry Senior Member

    Can you not just use a png and the proprietary IE png fix? I've been using it a lot lately with no issues at all.
     
  3. tbwcf

    tbwcf Active Member

    Hi Chris, I think thats for i.e 8 only, i.e 6/7 would need
    filter:alpha(opacity=80);
    & opacity:0.8; for other browsers.

    Be aware though that placing opacity on a Div for example will also effect the child elements of that, so for example it won't just be the background thats transparent but also the text.

    So as harry says a 1px X 1px transparent png for the background image may be better - check out the Transparent PNG Fills Pack here: Downloads
     
  4. Ahhh ok ... bugger :( it works fine everywhere else apart from IE8 :( I didn't really want to use an image :( bad IE8 :(

    Thanks for all your input guys :) once i've figured this out i'll show you all the final product :D
     
  5. tbwcf

    tbwcf Active Member

    You can easily make cross browser compatable with jquery

    $(“.transparent_class”).css(“opacity”, “0.5”);

    but a bit overkill to include jquery just for that, depends if your already using it.
     
  6. I was ... but i'm not 100% on the ball with my jQuery (like where to place the code etc :)) i might have to go down the transparent image route :( as much as I don't want to do it :(
     
  7. tbwcf

    tbwcf Active Member

    here's the code if you want it mate:

    <!--load jquery-->
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
    google.load("jquery", "1.3.1");
    </script>
    <script type="text/javascript">
    $(document).ready(function() {
    $(“.transparent_class”).css(“opacity”, “0.5”);
    });
    </script>

    if you stick it in the footer it won't slow page loading down. Alternatively in the head of the doc, upto you. That should be all you need
     
  8. Harry

    Harry Senior Member

    But as Andy said, don't use the jQuery method unless you're using jQuery already!
     
  9. ok well i will not use that then :p I just tried it and its not working either :( must be something i'm doing :p
     
  10. Harry

    Harry Senior Member

    Use the 1x1px png!

    Code:
    element{ background:url(/images/dot.png); }
    In IE6:

    Code:
    element{ background-image:url(/images/dot.gif); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='/images/dot.png'); }
    dot.gif being a 1x1px fully transparent gif.
     
  11. i'll give it a go Harry :) if this doesn't work i'll show you guys what i've done anyways :D :lol: maybe you'll be able to see what the problem is if the 1px doesn't work :p
     
  12. tbwcf

    tbwcf Active Member

    Sorry Chris, I think it was bad quote marks. Just checked and this would work

    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
    google.load("jquery", "1.3.1");
    </script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('.transparent').css('opacity', '0.5');
    });
    </script>

    You would just name give the div class="transparent" - best to use the transparent png though! if you have any problems let me know!
     
  13. nope... didn't work either way :( I think i'm running out of steam on this LOL :p I've been working on this site all day today and i've gotten this far :) might come back to it on Monday :D

    Thanks for your help everyone :)

    if you want to have a looksee at what i've made:

    Welcome to ChoiceLive | Professional Congress Organiser
     
  14. Harry

    Harry Senior Member

    Is the png fix I gave not working for you?
     
  15. nope.. neither the png or gif or jquery.. though I think I probably made a mistake somewhere LOL :p :)
     
  16. Harry

    Harry Senior Member

    Yeah, hate to say it but I think it's you :p

    I've been using that png fix for the last two days straight lol.
     
  17. LOL yep must be me then :p its been a long day :p

    what do you think of the site by the way Harry? :)
     
  18. tbwcf

    tbwcf Active Member

    Those grey boxes are transparent in safari, ff, and ie 7 Chris, the white box is solid in ie7...
     
  19. hmmmm very weird :) well I'll have to list all the transparency problems and try to fix them next week LOL :)
     
  20. Renniks

    Renniks Senior Member

    Not sure on the use of the standard login panel slider.... (though I currently have it used on a project I started a while back)
     

Share This Page