Results 1 to 2 of 2

Thread: Another IE and Opacity Issue

  1. #1
    Join Date
    Oct 2008

    Another IE and Opacity Issue


    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.)

    .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>
    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.

    .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
    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.


    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