-
1. Re: CSS opacity problem
Nancy O. Jun 22, 2010 2:54 PM (in response to matthew stuart)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 Jun 22, 2010 3:38 PM (in response to Nancy O.)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. Jun 22, 2010 4:07 PM (in response to matthew stuart)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 Jun 22, 2010 5:36 PM (in response to Nancy O.)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 Feb 8, 2013 11:22 AM (in response to Nancy O.)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 { }



