Confusing button behaviour in Firefox

And if you hold the mouse down on Home the background gets wider. I’d expect the effects to stop as soon as I click, so that the thing I clicked on remains highlighted to show that the click worked. I’ve no idea why Firefox and Chrome are different in this way.

Hi Rod, yeah I’m aware of that problem with the home button – I was going to start a separate thread for that, but I’m gonna try and fix it myself first. As for the button effects, I tend to agree with you, I wanted to leave the button highlighted once it was clicked on, but the only way I know of doing this is via the :active selector, but I don’t want any menu item highlighted when one first visits the site. I don’t know of a workaround. My compromise was to put a slight glow on the active menu text, but it’s not very clear…

…and I want the menu text to fade to white when clicked on. I’ve added this to the style sheet but it’s not working :-/

Looks like the white is coming from some focus styles you have in the CSS for the menu links.

..ah. The white text is working but it’s using 0.3 opacity so it’s not very bright. I’ll need to use a solid colour for the background and scrap the opacity setting.

What’s doing the fade effect, JavaScript or CSS?

Hi Andrew…I’m using CSS for the fade effect. Almost happy with it now, but still got the problem with Firefox :-/

What problem do you still have?

If you click on a menu item in Firefox and move the mouse away immediately, the background turns white, which I think is the default behaviour of the theme…it does the same thing in IE, but works OK in Chrome and Safari.

You need to override the focus styles for the menu items, they have a white background at the moment.

Thanks Andrew! ?? That worked a treat. For others looking at this thread – I added this code :

#branding ul.menu a:focus {
background: #807134!important;
color: #cccccc!important;
-moz-border-radius: 5px;
border-radius: 5px;
}