WordPress.org

Ready to get started?Download WordPress

Forums

Confusing button behaviour in Firefox (12 posts)

  1. Marcus
    Member
    Posted 10 months ago #

    Hello all, perhaps I'm being too much of a perfectionist here but I've notice my main menu navigation buttons behave a little strangely in Firefox. If you click on the page links in Chrome then quickly move the mouse away from the link, the fade effect 'reverses' nicely. If you do the same in Firefox, the background turns white instead of yellow. This only happens if you move the mouse away before the transition effect is complete.

    http://www.mandodymedia.com

    Any ideas??

  2. Rod Whiteley
    Member
    Posted 10 months ago #

    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.

  3. Marcus
    Member
    Posted 10 months ago #

    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...

  4. Marcus
    Member
    Posted 10 months ago #

    ...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 :-/

  5. Andrew
    Forum Moderator
    Posted 10 months ago #

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

  6. Marcus
    Member
    Posted 10 months ago #

    ..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.

  7. Andrew
    Forum Moderator
    Posted 10 months ago #

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

  8. Marcus
    Member
    Posted 10 months ago #

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

  9. Andrew
    Forum Moderator
    Posted 10 months ago #

    What problem do you still have?

  10. Marcus
    Member
    Posted 10 months ago #

    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.

  11. Andrew
    Forum Moderator
    Posted 10 months ago #

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

  12. Marcus
    Member
    Posted 10 months ago #

    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;
    }

Reply

You must log in to post.

About this Topic