Jump to content

<!doctype..> Changes Css Behavior


GerryH
 Share

Recommended Posts

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

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

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

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

  • 2 weeks later...

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...