This is maybe a dumb question but I just built a CSS menu that works fine except for when I click on the button link the link works fine but it then displays the image as broken up into 4 smaller images and stays that way until you click anywhere else on the screen (then it goes back to displaying properly). I think it is something simple that I am ignoring in the a:link and a:visited section but here it is: <style type="text/css"> body { font-family: default; margin: 0; font-size: none; font-weight: bold; } ul { list-style: none; margin: 0; padding: 0; } /* =-=-=-=-=-=-=-[Menu Two]-=-=-=-=-=-=-=- */ #menu2 { width: 285px; height: 50px; border-style: solid solid none solid; border-color: #FFFFFF; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 40px; voice-family: "\"}\""; voice-family: inherit; height: 33px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #000000; display: block; height: 33px; background: url(images/menuA.png); padding: 8px 0 0 10px; } #menu2 li a:hover { color: #009933; height: 33px; width: 290px; background: url(images/menuB.png); padding: 8px 0 0 10px; } #menu2 li a:active { color: #009933; height: 33px; background: url(images/menuA.png) 0 -64px; padding: 8px 0 0 10px; } </style> </head> <body> <div id="menu2"> Any guidance would be greatly appreciated!
A link to the page would help. Why did you use the voice-family hack ? Is li 40px or 33px high and for which browser ? is it really 290px wide per link ?
Yea the voice-family hack needs to be taken out Here it is: http://www.californiahealthinsurance360.com/CSS Menu.htm
You can remove border-size as it is not valid code instead of #menu2 li a:active try #menu2 li a:focus { color: #009933; display: block; height: 33px; background: url(images/menuA.png); padding: 8px 0 0 10px; width: 275px; }