making buttons with css

Hi All,

I researched several css sites and then wrote some code for menu links that form a colored box that changes the background color when the mouse moves over it and also another color after it's clicked (it progresses to ever lighter colors of green). This is a lot faster than using Javascript and less code bloat. 

It works fine in IE 5 but of course only shows the links in Netscape 4.79 --I'm not so concerned about the later right now. 

I checked the code in http://www.htmlhelp.com/tools/csscheck/ and it gave me the following warning:

>Warning: The height and Width property only applies to block-level and replaced elements, and elements with position value absolute. 

I would like to know how to fix the following so it passes CSS check (I don't want to use position absolute). 

.menu a:link { width: 120px; height: 20px; padding: 5px; background: #006600;
color: #ffffff;
font: bold 12px sans-serif;
text-decoration: none;}

.menu a:active { width: 120px; height: 20px; padding: 5px; background: #009900;
color: #ffffff;
font: bold 12px sans-serif;
text-decoration: none;}

.menu a:visited { width: 120px; height: 20px; padding: 5px; background: #99ff00;
color: #000000;
font: bold 12px sans-serif;
text-decoration: none;}

.menu a:hover { width: 120px; height: 20px; padding: 5px; background: #009900;
color: #ffffff;
font: bold 12px sans-serif;}


Here is what I used for the link in the menu text: 

<div class="menu">
<a href="./">Home</a><br><br>
</div>

thanks,
Lori

HTML: hwg-basics mailing list archives, maintained by Webmasters @ IWA