[web] hover state doesn't work in Safari :(

LaFemmeMikitaLaFemmeMikita
edited February 2008 in advice
my hover state for my list of links works beautifully in Firefox, but not at all in Safari.

can anyone help?? I've googled and can't find an answer.

my links page

Comments

  • chrischris
    edited 1:00PM
    so, this is all fixed up now?
  • urbansurgeonurbansurgeon
    edited 1:00PM
    just so you know (and im sure you want to) its broken in IE

    expect that anytime you have sizes borders margins and padding o block level elements (such as divs)

    there are hacks to achieve the same but there are also alternative markup solutions
  • LaFemmeMikitaLaFemmeMikita
    edited 1:00PM
    urbansurgeon said...just so you know (and im sure you want to) its broken in IE

    expect that anytime you have sizes borders margins and padding o block level elements (such as divs)

    there are hacks to achieve the same but there are also alternative markup solutions

    yeah it's broken in IE6 only, works in IE7, Firefox, Safari.

    since my target group will be looking at this on a mac in firefox or safari i don't care too much about THIS site in IE6 being broken - but would like to know how to fix it for future reference.

    so fire away with alternative markup solutions.
  • LaFemmeMikitaLaFemmeMikita
    edited 1:00PM
    Ok anybody run into this before?

    I have a hover state that works in Firefox but not Safari. anybody know how to fix it?

    list of links
  • peak'peak'
    edited 1:00PM
    These are in the element favlinks? Then reorder your selectors in the style sheet so the are in this order and see if that work (I've seen this before I think):

    link
    visited
    hover
    active

    At the mo you've got:

    visited
    link
    hover
    active
  • LaFemmeMikitaLaFemmeMikita
    edited February 2008
    peak,

    rearranged, no difference.

    If I take off the display: block; on the hover state then it will show the black behind the text area only and not the entire width of the element FAVLINKS.

    If I add display: block; to all the states - well it's not what I want. :(

    I mean it works here on FL - the nav on the left.

    also i've now done something that makes the main content div broken in IE7 (and i'm sure IE6) and pushes it under the sidebar on the right on all my pages. ugh.
  • peak'peak'
    edited February 2008
    Start of by getting rid of:

    border: 0;
    display: block;

    in: #favlinks a:hover

    and rebuild from there if anything else has stopped working . . . .
  • LaFemmeMikitaLaFemmeMikita
    edited February 2008
    Peak,

    seems safari won't allow the block pseudo class on the hover state unless I also apply it to the link state, given i don't want the red dots to run the entire width of the div, i'm going to have to settle for no block element on the hover state and just have the black appear behind the text for as wide as each text line is. Or I'd have to give up my red dots.


    still don't know what i did to cause the IE7 screw up where the maincontent div is displaying the sidebar correctly, but the div to its left is getting pushed below.
    EDIT: at some point last night I added a width to the main content and removed the right margin. By not specifying any width and adding a right margin in to clear the sidebar div, all is well in IE7 again.
  • peak'peak'
    edited 1:00PM
    Bummer, okay . . .

    Couldn't you just drop that red line all together :)

    I'm not sure about it anyway

    (ducks as lfm throws a comp at my head)

    Do you have a screen-shot of how you'd like it to look link and hover?
  • LaFemmeMikitaLaFemmeMikita
    edited February 2008
    I'm using the red dotted lines to tie into the red dots that separate my Nav items - it's also how my actual resume looks too - my contact info is separated by red dots. The red dots were also more appealing than having the text all red. For now I'll keep them, but once i have this sucker built to a fairly functional/designed state, it's going up for critique here at FL. (And the red dots DON'T appear in the hover state - it goes just to white text on black background - no dots)

    I just liked the black in the hover state going for the full width - tied in well with the rest of the site design of these long thin black lines with reversed out type, just cooler than the black only extending as far as the text. So if i decide that's more appealing - I may drop the dotted lines all together so i can do a block element display since Safari needs the hover and link to display the same - doesn't care about visited or active, just that hover and link pseudo classes have the same display.

    Now i'm onto trying to incorporate another Javascript gallery on my design page. not as simple as the one for my home page. :P I'll be back with more questions later on that subject. I do so appreciate all your help - this part of web design drives me crazy.
Sign In or Register to comment.

© fazyluckers, the forum 2024