GerryH Posted October 22, 2009 Share Posted October 22, 2009 I've been experimenting with CSS Sprites, but first wanted to get the CSS link, hover, etc working first.What I notice is when I declare a <!DOCTYPE> to the page, all the actions except active work. Here's a quick an dirty example of what I mean. <!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><style type="text/css">#menu_bar { border:solid red 1px; width: 442px; height: 34px; margin: 0px auto; padding: 0px; position: relative;}#menu_bar li { margin: -1px; padding: 0px; list-style: none; position: absolute; top: 0px;}#menu_bar li, #menu_bar a { height: 32px; width:110px; display: block; border:solid 1px; text-align:center;}#panel1b {left: 0px;}#panel2b {left: 110px; }#panel3b {left: 220px; }#panel4b {left: 330px; }#menu_bar li a:link {background-color:#FFFFFF} #menu_bar li a:visited {background-color:#FFFFFF} #menu_bar li a:hover {background-color:#FF00FF} #menu_bar li a:active {background-color:#0000FF} </style></head><body><ul id="menu_bar"> <li id="panel1b"><a href="#1">1</a></li> <li id="panel2b"><a href="#2">2</a></li> <li id="panel3b"><a href="#3">3</a></li> <li id="panel4b"><a href="#4">4</a></li></ul></body></html> If you notice the hover works fine, however if you click a link, the active only seems to be triggered as long as the mousedown is held. Now the interesting thing is if you remove the <!DOCTYPE> is works like a charm. After Googling for solutions, I found that if I add a "focus" before the "hover", (see snippet below) the focus acts like what I would expect from the active. #menu_bar li a:link {background-color:#FFFFFF} #menu_bar li a:visited {background-color:#FFFFFF} #menu_bar li a:focus {background-color:#CCCCCC}#menu_bar li a:hover {background-color:#FF00FF} #menu_bar li a:active {background-color:#0000FF} Can someone explain what's happening, or what I'm doing wrong?Thanks! Link to comment Share on other sites More sharing options...
chibineku Posted October 22, 2009 Share Posted October 22, 2009 Active is only meant to work onmousedown, and focus and hover work onmouseover. That's normal. If you don't declare a doctype, then the browsers behave unpredictably and will pretty much adopt whatever behaviour they like. As a rule, use strict for maximum compliance across the newest browsers. Link to comment Share on other sites More sharing options...
GerryH Posted October 22, 2009 Author Share Posted October 22, 2009 Thank you for the reply, actually in the page I'm trying to use it in, I strive for the strict standards which had the same results. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd is -//W3C//DTD XHTML 1.1 Strict//EN"><html xmlns="http://www.w3.org/1999/xhtml" > Perhaps I'm crying "help" to soon, but what I'm trying to accomplish is to create a navigation menu using CSS rather than JavaScript, but the issue I'm trying to figure out is how to keep the "selected" menu option in "focus" or "active" when the element containing the menu options (the UL in this case) loses focus (the user moves into the content of what the menu is supposed to display).Sorry, but my brain is now a noodle, thanks to google, and don't ask me to moodle! Thanks! Link to comment Share on other sites More sharing options...
chibineku Posted October 22, 2009 Share Posted October 22, 2009 You'll need to change the menu slightly on each page and assign the current page li some class that attracts the appropriate 'active' style if you want to achieve that without javascript. Link to comment Share on other sites More sharing options...
roundcorners Posted November 1, 2009 Share Posted November 1, 2009 Give the body tag a class, and each list item a class, then use css to create an active property when the classes match. E.g.<body class="home><ul><li class="home"><a href="">Home</a></li><li class="about"><a href="">About</a></li><li class="contact"><a href="">Contact</a></li><li class="portfolio"><a href="">Portfolio</a></li></ul>etc...body.home ul li.home a {text-decoration:underline;color:#aaf;} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.