5 Replies Latest reply on May 24, 2006 2:57 AM by Newsgroup_User

    Layer Opacity with Mozilla Firefox

    theBoredProductions
      On the website I am creating I have layers with a background colour with a lower opacity, so that it is slightly transparent.

      When I preview the page in Internet Explorer, it works ... but I can't seem to get it to work for Mozilla Firefox.

      Does anyone know how I can make it work for both?

      Thank you.


      Del Dalton.
        • 1. Re: Layer Opacity with Mozilla Firefox
          Level 7
          theBoredProductions wrote:

          > Does anyone know how I can make it work for both?

          You can use the CSS3 opacity property:

          #id { opacity: .5; }

          "Starting with Mozilla 1.7, the standard CSS 3 opacity property is
          supported as well. Prior to Mozilla 1.7, -moz-opacity was implemented
          differently, as an inherited property. Use of opacity is preferred to
          -moz-opacity."
          http://developer.mozilla.org/en/docs/CSS:-moz-opacity

          http://www.w3.org/TR/css3-color/#transparency

          John
          • 2. Re: Layer Opacity with Mozilla Firefox
            theBoredProductions Level 1
            Ok. I've given that a try, but I can't seem to get it right.

            I'm using Dreamweaver MX. To do what I did orignally I just created a CSS style ".layer1" and went to extensions, filters and then selected 'Alpha(Opacity=?)' - changing the '?' to the value I wanted.

            I'm not quite sure how, or where I can insert this '-moz-opacity: ?'.

            If you can, could you insert it to the code below, and I will see if it works:

            <html>
            <head>
            <title>the Bored Productions - Home</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <style type="text/css">
            <!--
            body {
            background-attachment: fixed;
            background-image: url(images/ice.png);
            background-repeat: no-repeat;
            background-position: center center;
            }
            -->
            </style>
            <script language="JavaScript" type="text/JavaScript">
            <!--
            function MM_reloadPage(init) { //reloads the window if Nav4 resized
            if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
            document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
            else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
            }
            MM_reloadPage(true);
            //-->
            </script>
            </head>

            <body>

            <div id="Layer1" style="position:absolute; left:497px; top:28px; width:268px; height:86px; z-index:1"></div>
            </body>
            </html>


            Thank you.


            Del Dalton.
            • 3. Re: Layer Opacity with Mozilla Firefox
              Level 7
              theBoredProductions wrote:

              > I'm not quite sure how, or where I can insert this '-moz-opacity: ?'.

              You should probably use opacity (from CSS3; its also supported by
              Safari) rather than the propietary extension property -moz-opacity.

              > <style type="text/css">
              > <!--
              > body {
              > background-attachment: fixed;
              > background-image: url(images/ice.png);
              > background-repeat: no-repeat;
              > background-position: center center;
              > }

              #Layer1 {
              opacity:.5;
              }

              > -->
              > </style>

              I don't actually see anything in the markup you posted which would set
              opacity on Layer1 in IE.

              John
              • 4. Layer Opacity with Mozilla Firefox
                theBoredProductions Level 1
                You're great! That's brilliant!

                Somehow I managed to miss out this below:

                }
                .layer1 {
                background-color: #000000;
                filter: Alpha(Opacity=30);


                But changing it to the following, has sorted that out for me:

                }
                .layer1 {
                background-color: #000000;
                filter: Alpha(Opacity=30);
                opacity: .3


                Thank you ever so much!


                Del Dalton.
                • 5. Re: Layer Opacity with Mozilla Firefox
                  Level 7
                  theBoredProductions wrote:

                  > But changing it to the below, has sorted that out for me:
                  >
                  > <b>}
                  > .layer1 {
                  > background-color: #000000;
                  > filter: Alpha(Opacity=30);
                  > opacity: .5</b>

                  To match what you're using in the IE filter, set the opacity to .3.

                  > Thank you ever so much!

                  Glad I could help.

                  John