This menu: http://korbyimagery.com/site/nwc/service.asp The ON or FOCUS state is not working correctly. I believe the background image is taking precedence over the CURRENT state, but I am not sure how to correct it. Suggestions? TIA Here is the relevant CSS: /*menu------------------------------------------------*/ #indentmenu {font: normal 13px Georgia, "Times New Roman", Times, serif; color: #474822; width: 490px; height: 49px; overflow: hidden; background: url(../images/navbg.gif) no-repeat left top; z-index:1;} #indentmenu ul { margin: 0; padding: 0 0 0 10px; float: left; } #indentmenu ul li { display: inline; } #indentmenu ul li a:visited {color: #474822;} #indentmenu ul li a {float: left; color: #474822; padding: 11px 17px; text-decoration: none; height: 49px; } .gap { float: left; text-decoration: none; height: 49px; background: url(../images/nav-div.png) no-repeat center top; width: 10px; z-index: 9999; } a:hover { color: #474822 !important; padding-top: 12px; padding-bottom: 4px; height: 49px; background: url(../images/nav-over.gif) repeat-x left top; z-index: 999; z-index: 9999; } a:focus { color: #474822 !important; padding-top: 12px; padding-bottom: 4px; height: 49px; background: url(../images/nav-over.gif) repeat-x left top; z-index: 999; z-index: 9999; } a.current { color: #474822 !important; padding-top: 12px; padding-bottom: 4px; height: 49px; background: url(../images/nav-over.gif) repeat-x left top; z-index: 999; z-index: 9999; } --- Korbs
Is the "on" state working? Are you seeing a depressed button in the nav? I'm not in FF or IE. I am very likely wrong about the reason for it not working, that was just my best guess. -- Korbs
It looks like the hover state in Firefox 3, which I believe is what you wanted. It did not work in Internet Explorer 6 however.
Ok I see what you are saying. Yes, hover works. What I am after is the ON or ACTIVE or FOCUS state. The button should remain in the hover state while the page is being viewed. I am trying two ways to achieve this: a:focus {same as hover} this alone has worked in the past, and a.current {same as hover}. The button then looks like this: <li><a href="service.asp" class="current">Service/Consulting</a></li> Neither is working in this case.
I'm not sure I understand what you're trying to achieve here. You want the button to remain indented (same as the hover image) when the users activates the link, correct? I don't see a declared :active state in the CSS you've posted above? It should be something like #indentmenu ul li a:active {}
I mean like this: http://weddingelegancend.com/ The current page shows up with white text in the nav bar. See what I mean? This was accomplished with a:focus. The same trick is not working on this nav bar. I even went in and added a .current to each page's corresponding navigation. This is how the nav on the Training page should appear while you are looking at the Training page: That is the best I can explain. Thanks, Korbs
A good rule of thumb, if you have to use !important, you probably screwed up somewhere... if you have to use a clearing break on a wrapper, you probably screwed up somewhere... and if you aren't stating your line-heights on a menu over a background image and using Z-index on hover states, you are definately doing something wrong... and it always helps to trap :active since IE uses it like other browsers do :focus - and of course declaring the :visited before your flat A declaration means that's instantly overridden. Not that your CSS is anything more than a redundant unintelligable mess with that 'all on one line' rubbish and overuse of spaces making it impossible to tell properties apart from their values, or even seeing that you have several redundant declarations... Hmm, also doesn't help declaring 49px height + 11px top and bottom padding... or declaring a fixed width when you can't predict the rendering size of the different fonts to a measurable norm.... and that DIV around the UL really isn't doing anything for you either.... and nav-div.gif doesn't even exist. Because you are working inside a fixed width area I would not use float to do this because the spacing is unpredictable - I would instead make them inline-block (and the FF2 workaround equivalent) so you can use text-align:center on them. Try this rewrite - uses a single image for the background and hover states, and throws away all those redundant/pointless declarations you had. http://www.cutcodedown.com/for_others/korbs/ Tested in IE 5.5, 6 & 7, FF 2.0 and 3.0, Opera 9.27 and 9.52 beta, and Safari 3... and it even actually centers the menu text top to bottom in the image.
Thanks. I didn't realize spacing made a difference. The single graphic makes much more sense. The css has been cleaned up and all is in working order. I appreciate the help. One question. Is this the FF2 workaround? I don't think I have seen this before. display:-moz-inline-block; display:-moz-inline-box; -- Korbs