4 Replies Latest reply on Sep 10, 2008 5:14 PM by Newsgroup_User

    IE7 & CSS Opacity

    Ben M Adobe Community Professional
      I'm curious if any experts out there have had any experience with this. I have tried using the following in my CSS document:

      opacity:.4; //For Everything Else
      filter:alpha(opacity=40); //I thought this would do the trick for IE

      And despite that code only Safari, Firefox and every other browser will display the opacity, but not IE 7. I could care less about IE 6 because the site I have doesn't get enough hits from IE6 for it to be a concern. And this problem also appears to happen in IE 8, but I assume there is something in common with the two IEs that are causing this issue.

      If anyone has any ideas that would be great because I am pretty much out of them with this issue:

      http://www.exitplaystation.com/ps3/warhawk/index.php - This is the site. Even the Spry widgets have the same issue, but the menu is the most obvious.

      http://www.exitplaystation.com/ps3/warhawk/css/exitps_warhawk.css - This is the CSS document. #menu_bg is the menu container that expands the width of the screen and is the source of the main issue.
        • 1. Re: IE7 & CSS Opacity
          Level 7
          "SnakEyez02" <webforumsuser@macromedia.com> wrote in message
          news:ga1fvf$pvv$1@forums.macromedia.com...
          > I'm curious if any experts out there have had any experience with this. I
          > have
          > tried using the following in my CSS document:
          >
          > opacity:.4; //For Everything Else
          > filter:alpha(opacity=40); //I thought this would do the trick for IE
          >
          > And despite that code only Safari, Firefox and every other browser will
          > display the opacity, but not IE 7. I could care less about IE 6 because
          > the
          > site I have doesn't get enough hits from IE6 for it to be a concern. And
          > this
          > problem also appears to happen in IE 8, but I assume there is something in
          > common with the two IEs that are causing this issue.
          >
          > If anyone has any ideas that would be great because I am pretty much out
          > of
          > them with this issue:
          >
          > http://www.exitplaystation.com/ps3/warhawk/index.php - This is the site.
          > Even
          > the Spry widgets have the same issue, but the menu is the most obvious.
          >
          > http://www.exitplaystation.com/ps3/warhawk/css/exitps_warhawk.css - This
          > is
          > the CSS document. #menu_bg is the menu container that expands the width
          > of the
          > screen and is the source of the main issue.

          For the filter to work in IE, you need to give the element a layout (Google
          "Ingo Chao hasLayout" for the best article on this).
          So try this:
          #menu_bg {width:100%;}

          If for any reason this creates an issue with the layout and you don't care
          about CSS validation then go with a simple:
          #menu_bg {zoom:1;}


          --
          Thierry
          Articles and Tutorials: http://www.TJKDesign.com/go/?0
          --
          http://developer.yahoo.com/ helps you build applications and mashups

          • 2. Re: IE7 &amp; CSS Opacity
            Level 7
            "SnakEyez02" <webforumsuser@macromedia.com> wrote in message
            news:ga1fvf$pvv$1@forums.macromedia.com...
            > I'm curious if any experts out there have had any experience with this. I
            > have
            > tried using the following in my CSS document:
            >
            > opacity:.4; //For Everything Else
            > filter:alpha(opacity=40); //I thought this would do the trick for IE

            > If anyone has any ideas that would be great because I am pretty much out
            > of
            > them with this issue:

            In addition to Thierry's excellent advice, do note that their are some
            issues with the opacity filter and IE7. One issue is that IE turns off
            font-smoothing for text inside an element that has an opacity filter set.

            Another issue is that the filter creates a box and will hide child elements
            nested in that box if the filter is assigned to certain kinds of parent
            elements. If, for instance, you added sub-levels to your nav bar and
            assigned the filter to a containing DIV or to the ULs, your sub-levels would
            not display. The solution would be to assign the filter to the LI elements.

            An important note is that IE8 might be released without any support for
            opacity or for filters.

            A possible solution would be to use transparent PNG background image(s)
            (supported by IE7) and allow older versions of IE to degrade gracefully to
            an opaque menu.


            --
            Al Sparber - PVII
            http://www.projectseven.com
            Fully Automated Menu Systems | Galleries | Widgets
            http://www.projectseven.com/go/Elevators


            • 3. Re: IE7 &amp; CSS Opacity
              Ben M Adobe Community Professional
              Thanks for the help. Al I actually took your suggestion for the PNG files because while the CSS3 opacity gives the desired effect I did some reading up on IE 8 and realized that it will only support CSS 2.1. So because of that PNGs are the way to go. I tend to forget about them at times, but this is definitely a good place to use them.
              • 4. Re: IE7 &amp; CSS Opacity
                Level 7
                "SnakEyez02" <webforumsuser@macromedia.com> wrote in message
                news:ga9h18$ica$1@forums.macromedia.com...
                > Thanks for the help. Al I actually took your suggestion for the PNG files
                > because while the CSS3 opacity gives the desired effect I did some reading
                > up
                > on IE 8 and realized that it will only support CSS 2.1. So because of
                > that
                > PNGs are the way to go. I tend to forget about them at times, but this is
                > definitely a good place to use them.
                >

                Hi Snake,

                You might find this useful to keep for future reference:
                http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx


                --
                Al Sparber - PVII
                http://www.projectseven.com
                Fully Automated Menu Systems | Galleries | Widgets
                http://www.projectseven.com/go/Elevators