Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Hover State stays Active using Back Button

    Ok, so here is the site http://www.furniturelandnewjersey.com/test.html

    Issue is with both the side and top navigation.

    Header Nav has 4
    inactive
    hover
    click
    current

    Side has 2, 3rd state is supposed to just be red rest, but had trouble coding it.
    hover turns text red and has background box in light grey
    inactive state is just grey text

    So when you click any element, go ahead and try. Then use the back button, the button will remain int he hover state. I know it has something to do with the back/forward cache and i saw a solution for jspry but am not sure how to deal with this css based navigation.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,872
    Thanks
    6
    Thanked 1,030 Times in 1,003 Posts
    The cause for this is not the hover state but rather the focus state since you have defined that same state to the :hover and :focus pseudo classes and when clicking a link the link is actually focused and stays as long as you click anywhere else. Remove the focus selector and it should be as you want it.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I tried removing the focus class, but it still stays highlighted red or in the hover state until the mouse is somewhere else on the page.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,872
    Thanks
    6
    Thanked 1,030 Times in 1,003 Posts
    It doesn’t for me in Firefox 5 if you remove #menuheader #navlists li a:focus from
    Code:
    #menuheader #navlists li a:hover, #menuheader #navlists li a:focus {
        background-position: 100% -70px;
    }
    (or likewise with nav ul a:focus and the general a:focus selector)
    Last edited by VIPStephan; 07-29-2011 at 03:09 AM.

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok I think it works I think. The old method may have been in the cached somehow. I will take your word that it works and test it out latter. I don't want to log out of the hosting server yet. I will check out the results of removing focus, and if it works in ff5, same as what I have, than it should work.

    A side question.

    Is netrender accurate? I have also used adobe browser labs and coloring comes out weird when I use the adobe labs but ok on netrender.

    Anyway the top header image comes out centered in ie7 and I am wondering if I should just make the header image big enough to cover the entire width of the website so it centers. Not sure if ie7 supports the header tag from html5.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,872
    Thanks
    6
    Thanked 1,030 Times in 1,003 Posts
    Quote Originally Posted by c0ding_n00b View Post
    Not sure if ie7 supports the header tag from html5.
    Haha, that’s a good one. Yeah, no, IE7 does definitely not support any HTML5 – just as IE 8 doesn’t. In my opinion you shouldn’t use HTML5 for non-trivial things yet. You can use HTML5 elements but don’t rely on them for styling or whatever.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •