hover properties being overrun

Discussion in 'CSS' started by Stomme poes, Sep 9, 2007.

  1. #1
    I'm still dicking with Stu's menu. I just today discovered that while everything looked okay on my browser when looking at the file locally, the hover property is not rendering correctly when viewing the site from online after link has been visited.
    I have hover listed in my css AFTER a and :visited, and re-adding the correct colours multiple times has worked on all my classes but one.

    http://stommepoes.jobva.nl/guis2.html looks fine at first (except in IE 6 and under, still ignoring visibiliy:hidden there), but after clicking one of the blue links, then hitting the back button, shows that on hover, the text colour no longer changes, so no text is seen. The other links at first had the same problem, but redundant copies for each class in the css fixed them. Not so with class "verzekeren." I'm stumped as to why this is. I know it's very possible that there's something further up interfering, and I've looked but just don't see it.

    Yes, everything validates (ignoring the perl links).

    Any ideas?
     
    Stomme poes, Sep 9, 2007 IP
  2. mikebrad0927

    mikebrad0927 Peon

    Messages:
    266
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    wow, that is strange. When you click anywhere on the page (after hitting the back button), it clears the hover.

    It's as if the browser is remembering the hover.

    I want to check this out, I'll let you know if I find anything.
     
    mikebrad0927, Sep 9, 2007 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I think the "remembering" may have to do with the "active" property. That may also be a problem later as the perl scripts load only the middle of the page on click, not the whole header and sidebar again.

    The thing is, even if you have a property for visited set (as I do), the hover should always override the visited when it's placed later in the CSS (specificity notwithstanding). This is where I'm doing something wrong...
     
    Stomme poes, Sep 10, 2007 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Update: I've redone it, and never found out what the problem was. I never could have a set of links with a different colour either: they wouldn't hold their hover as the mouse went further down.

    But I gave in and used a div around the menu instead of just giving the main <ul> a class : ( Because everything kept inheriting, I needed a lot of classes, which doesn't sit right with me. Everything under the main links is in the class "onder" which seem to hold their colour-scheme under FF but not under IE 6(I'm not screwing with that anymore).

    I also noticed that on Stu's site, if I click on a main link, then hit the back button, I do still have the link selected, so that's normal.
     
    Stomme poes, Sep 12, 2007 IP
  5. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #5
    Just a suggestion - its hard to follow this cos I think I've joined in the middle of the problem BUT - do you have the visited link colour set to the same as the text maybe?
     
    le007, Sep 12, 2007 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Leo,
    The visited and regular link colours were the same, which was what I was aiming for. The problem was that even though hover is written later in the stylesheet-- and thus should always work regardless if the link had ever been visited or not-- the hover was NOT doing its job on visited links. This is why the conventional order for links is
    link
    visited
    focus
    hover
    active
    The later always having precedence over the earlier.

    On this style of website, having a "visited" colour makes no sense, so I've made it the same as unvisited links. This is because no matter what page you're on, you can always just go to wherever you want to. One never has to go back to find a new set of links to another part of the page. This also isn't a very investigative page-- you click on what you're looking for, or that's what most people do when buying insurance. : )
     
    Stomme poes, Sep 13, 2007 IP
  7. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #7
    Hey Stomme_poes
    ie does not recognize any hover attributes on anything else other than "a:" . You can try the ie7 thing or you can use the whatever:hover. Google whatever:hover and you should be able to find it. It's a htc file that you include in the body tag like so

    body {
    behavior: url(csshover.htc)
    }
     
    le007, Sep 13, 2007 IP
  8. <miska>

    <miska> Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    And there is also a known issue about the :active pseudo and old IE versions. If u use the active state it might cause problems in old IEs.
     
    <miska>, Sep 13, 2007 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Leo, yes thanks I know, but everything IS an a:
    I made sure of that from the beginning-- I have nothing in my menu that isn't a clickie link-- even the main part goes somewhere.

    The problem is that IE6 allows the inheritance of the colours, while the other browsers respect tht fact that I've got a different class name for the sub menus with different CSS laws.

    Also, the beginning of this thread was over problems before I redid the menu-- once a link was visted, the hover no longer worked (well, the background worked but not the text as well). Now, that problem is fixed.

    Now, the only difference is that in RoW browsers +IE7, the main menu becomes light blue with orange text, and everything else turns dark blue with white bold text. In IE, the light blue and orange remain. It's not a problem, just not pretty, so I'm leaving it. I'll still keep looking around to see what's going on, but I'll still send this online : )

    Miska, yeah I have an active state but that was for the focus issue IE has. IE treats Focus the same as active, and I didn't care if they looked the same or not, (Opera also does its own thing with focus and active, but so long as it's the same thing I don't care).
    Removing both active and focus doesn't change the inheritance of the hover I have.
     
    Stomme poes, Sep 14, 2007 IP
  10. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #10
    Hey Stomme_poes,

    Yeah I get you and with you regarding leaving it. I had a similar issue before but literally spent no time whatsoever on it - its a tiny issue. I'll have another look round my folders and see but as I said its nothing major!

    Leo
     
    le007, Sep 15, 2007 IP
  11. simonpeterong

    simonpeterong Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    If you want to make the link "still working" even if you have clicked or "visited" that link, you can just declare two tags :

    a and a:hover

    do not make any other tags but the two mentioned. That way even if you have clicked on it (the link), you can still see the link respond to the declared action of a:hover after numerous clicking.

    Hope my toughts about this is clear.. :rolleyes:
     
    simonpeterong, Sep 15, 2007 IP
  12. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #12
    If I don't state a visited state, the browser will use it's default if it has one. This may be a purple underlined or something ugly.

    I'm also using focus and active because I hope to have it keyboard-accessable-- so far not working real great, sitll dicking with that one.

    In any case, the way I have it now, hover always works for both text and background. It still won't work if I want special classes for different a and visited text colour for some of the main menu headings.
    On the site now, the main headings are white text. I originally had the ones actually referring to insurance in light blue, so they had a class, while the rest were just normal li's. But after clicking, then going back, the hover correctly changed the background colour but not the text colour, no matter where I repeated the hover order for specifically that class. It never mattered, the correct hover colour would not show up until the browser's cache was cleared.
     
    Stomme poes, Sep 15, 2007 IP