5 Replies Latest reply: Feb 8, 2013 11:22 AM by Mark.Stewart RSS

    CSS opacity problem

    matthew stuart Community Member

      I have a menu that I am trying to get to be 50% opacity and on mouse over change to 100%, but I am struggling in so many ways!

       

      I have managed to get the opacity to be 50% in safari and IE8, but not firefox, but no matter what, I can't get it to change to 100% on mouse over. I've got myself into such a pickle with this that I just don't know where to go now!

       

      I'm hoping somebody here might be good enough to help me out...

       

      #outerWrapper #navArea {

      margin-top: 5px;

      position: absolute;

      top: 120px;

      z-index: 2000;

      width: 260px;

       

      filter:alpha(opacity=50);

      -moz-opacity:0.5;

      -khtml-opacity: 0.5;

      opacity: 0.5;

      }

      #outerWrapper #navArea li {

      color: #FFF;

      list-style-type: none;

      background-color: #006aaf;

      padding: 8px;

      font-size: 16px;

      margin-left: -35px;

      margin-bottom: 8px;

      }

      #outerWrapper #navArea ul li a {

      /*color: #FFF;

      list-style-type: none;

      background-color: #006aaf;

      padding: 8px;

      font-size: 16px;

      margin-left: -30px;

      margin-bottom: 8px;*/

      text-decoration: none;

       

      filter:alpha(opacity=100);

      -moz-opacity: 1;

      -khtml-opacity: 1;

      opacity: 1;

      }

      #outerWrapper #navArea ul li a:hover {

      /*color: #FFF;

      list-style-type: none;

      background-color: #006aaf;

      padding: 8px;

      font-size: 16px;

      margin-left: -30px;

      margin-bottom: 8px;*/

      text-decoration: none;

       

      filter:alpha(opacity=100);

      -moz-opacity: 1;

      -khtml-opacity: 1;

      opacity: 1;

      }

      The #outerWrapper #navArea is what has managed to give me 50% opacity, but it is that which I think is overriding the ability of it to change to 100% on mouse over. You can see I have the 100% opacity settings in serval places, but success has eluded me for hours now.
      A corrected version, or even any advice will be greatly appreciated at this point.
      Many thanks in advance.
      Mat

        • 1. Re: CSS opacity problem
          Nancy O. CommunityMVP

          Can you post the HTML code you're using?

           

           

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web-design.blogspot.com/

          • 2. Re: CSS opacity problem
            matthew stuart Community Member

            here's a link to the page.

             

            http://www.matthewstuartdesign.co.uk/evo/

             

            I am in the middle of constructing a template for the site, but what is there is pretty much set in stone... I hope! At the bottom of the source code is the navArea div.

             

            Thanks.

             

            Mat

            • 3. Re: CSS opacity problem
              Nancy O. CommunityMVP

              1) Modern versions of WebKit, Opera, Linux  and Mozilla support CSS opacity now. You don't need browser specific properties for the good browsers anymore.  Just the bad ones (cough, IE, cough).

               

              2) I don't understand this latest trend in compounding.  Why complicate code with selector names that are 3 and 4 levels deep?  Where you have this:

               

              #outerWrapper #navArea ul li a:hover { }

               

              more easily expressed like this:

               

              #nav li a:hover { }

               

               

              Try pasting this code into a fresh, new HTML document and see how it works for you.

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
              <title>CSS Nav Menu Opacity Test</title>
              <style type="text/css">
              
              /**begin nav menu**/
              #nav ul, #nav li {list-style-type: none;}
              
              #nav li {
              width: 200px;
              font-size: 16px;
              padding: 5px 0 5px 0;
              }
              
              #nav li a {
              color: #FFF;
              display:block;
              padding: 10px;
              border: 1px outset silver;
              background-color: #006aaf;
              text-decoration: none;
              opacity:0.5;
              /**for pre-IE8**/
              filter:alpha(opacity=50);
              /**for IE8 only**/
              -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
              }
              
              #nav li a:hover,
              #nav li a:active,
              #nav li a:focus {
              opacity:1;
              /**for pre-IE8**/
              filter:alpha(opacity=100);
              /**for IE8**/
              -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
              }
              
              /**end nav menu**/
              
              </style>
              </head>
              
              <body>
              <!--Begin nav menu -->
              <ul id="nav">
              <li><a href="#">some item</a></li>
              <li><a href="#">some item</a></li>
              <li><a href="#">some item</a></li>
              <li><a href="#">some item</a></li>
              <li><a href="#">some item</a></li>
              <li><a href="#">some item</a></li>
              </ul>
              <!--end nav menu -->
              
              </body>
              </html>
              

               

               

              Good luck with your project,

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb
              http://alt-web-design.blogspot.com/

              • 4. Re: CSS opacity problem
                matthew stuart Community Member

                Thanks Nancy, that is exactly what I am trying to achieve.

                 

                There are times I think I have understood CSS, and then there are times like now where people like yourself completely undermine that thought! What has taken me hours of confusion has taken you minutes.

                 

                I am none the wiser as to why mine wasn't working, because at one point I had the alpha's attributed to the 'a' and 'a:hover' but alpha didn't want to know, so I got in a proper mess adding and taking away!

                 

                As for compounding, I've only started doing it recently cos' I thought it was the correct way to mark up, but I guess it's only best used when you need something specific styled differently in a particular area.

                 

                Anyway, thanks again.

                 

                Mat

                • 5. Re: CSS opacity problem
                  Mark.Stewart Community Member

                  Unless you had links in #outerwrapper that you wanted to treat differently. Or unless you wanted a special style for parents of a currently active submenu. #outerWrapper #navArea ul li a:hover { }