www.webdeveloper.com
Results 1 to 2 of 2

Thread: Another IE and Opacity Issue

  1. #1
    Join Date
    Oct 2008
    Location
    Toronto
    Posts
    4

    Another IE and Opacity Issue

    Howdy,

    Trying to understand how opacity works with IE, and how to get my web page coded to my liking. Needless to say, everything I try works with FF, but IE is definitely a challenge.

    I want to use opacity on the page to note what isn't available to users (photos). As the CSS code points to many objects in the page, can't set opacity there as it would impact all the objects whereas it might only be 2 or 3 I want to set opacity on.

    I'd like the following html/css code to work with IE: (I added the zoom and width=100 to setopac as per stuff I read about tricking IE, but they don't work.)

    Code:
    .setopac{filter:Alpha(Opacity=20);-moz-opacity:.20;opacity:.20; width:100%; zoom:1;}
    .phsbord06{BORDER:1px #FFFFFF solid;padding:5px;font-weight:bold;position:absolute;top:180px;left:125px;}
    .phstitle09{color:#887;font:12px arial,verdana,sans-serif;position:absolute;top:282px;left:-73px;width:160px; text-align: center;}
    HTML Code:
    <div id="about-layer">
    <span class="setopac">
    <img src="img/phmain6.jpg" alt="Coming Soon" border="0" class="phmbord6">
    <span class="phmtitle9">Coming Soon</span>
    </span>
    ...
    The above doesn't work at all with IE, works fine with FF. It doesn't seem to apply the setopac style to the 2 elements.

    If I do the following, it works in IE.

    Code:
    .phsbord06{BORDER:1px #FFFFFF solid;padding:5px;font-weight:bold;position:absolute;top:180px;left:125px;filter:Alpha(Opacity=20);-moz-opacity:.20;opacity:.20;}
    .phstitle09{color:#887;font:12px arial,verdana,sans-serif;position:absolute;top:282px;left:-73px;width:160px; text-align: center;filter:Alpha(Opacity=20);-moz-opacity:.20;opacity:.20;}
    HTML Code:
    <div id="about-layer">
    <img src="img/phmain6.jpg" alt="Coming Soon" border="0" class="phmbord6">
    <span class="phmtitle9">Coming Soon</span>
    or it works in IE this way too, by moving the opacity style into the html code as:

    HTML Code:
    <div id="about-layer">
    <img src="img/phmain6.jpg" alt="Coming Soon" border="0" class="phmbord6" style="filter:Alpha(Opacity=20);-moz-opacity:.20;opacity:.20;">
    <span class="phmtitle9" style="filter:Alpha(Opacity=20);-moz-opacity:.20;opacity:.20;">Coming Soon</span>
    My workaround is to set the opacity per image/text in the html code, but it just looks ugly, would much prefer to get the setopac css style to work.

    Any ideas? Thx...Ian

    (my web page is http://www.quickmire.com/photomain.html )

  2. #2
    Join Date
    Mar 2007
    Location
    USA
    Posts
    449
    I've had really good luck with this js library. It's very small and fixes opacity issues without having to mess with filters and stuff.

    http://labs.unitinteractive.com/unitpngfix.php

    Good luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles