Patrick Sharp's Sandbox

.css code 
			
#butt_menu a.button,
#butt_menu a.button:visited {
	background: url("_button1_.gif") 0 0 no-repeat;
	display:block;
	width:75px;
	padding:5px 0 0 25px;
	color:white;
}
   
#butt_menu a.button:hover {
	background-position: -100px 0;
	text-decoration:none;
}

#butt_menu a.button:active,
#butt_menu a.button:focus {
	background-position: -200px 0;
	outline: none; 
}
	
.html code

<div id="butt_menu">
<a href="#" class="button">Test 1</a>
<a href="#" class="button">Test 2</a>
<a href="#" class="button">Test 3</a>
</div><!-- butt_menu -->	

I can't seem to figure out why Google Chrome and Safari refuse to recognize :active or :focus anchor states

.css code 

a.tooltip span {
	display:none;
	padding:2px;
	margin:4px;
	width:auto;
	font-weight: normal;
	text-decoration:underline;
	color:#000;
}

a.tooltip:hover span {
	display:inline;
	position:absolute;
	background:#ffffff;
	border:1px dashed;
	text-decoration:none;
}
	
.html code

  ...like <a class="tooltip" href="#">
  CGI<span>Common Gateway Interface
  </span></a>...

This sometimes breaks in IE .. argh

One way to add functionality to a website is to use tooltips to define some of the terms that you use in the body text.

Things like CGICommon Gateway Interface, PHPPersonal Home Page
-or-
Hypertext Preprocessor and .CSSCascading Style Sheet are good examples of things you can stick tooltips on.