can't get css hover to work on link borders

Discussion in 'HTML' started by Greg N., Jun 27, 2005.

  1. Greg N.

    Greg N. Guest

    Hi folks,

    I can't get css hover to work for me. have a look at the tiny test case
    at http://coolhaus.de/misc/test2.htm

    questions:

    1. why does the hover border work on the second link, but not on the
    first? The only difference is, that the first img has a class (for
    image positioning), while the second has no class assigned.

    2. in the second case, where the hover does (sortof) work, why is the
    top hover border missing?

    3. why does the green border as defined in my css, not show?
    Greg N., Jun 27, 2005
    #1
    1. Advertising

  2. Greg N.

    Steve Pugh Guest

    Greg N. wrote:

    > I can't get css hover to work for me. have a look at the tiny test case
    > at http://coolhaus.de/misc/test2.htm
    >
    > questions:
    >
    > 1. why does the hover border work on the second link, but not on the
    > first? The only difference is, that the first img has a class (for
    > image positioning), while the second has no class assigned.


    You've floated the first image. Hence visually it is taken out of its
    parent element, the <a> element in this case. The border is applied to
    the <a>.

    > 2. in the second case, where the hover does (sortof) work, why is the
    > top hover border missing?


    It's not missing. It's behind the image. The <a> element is only as
    tall as the line height and the image is taller so it spills out the
    top of the <a> and covers the top border. This also explains the gap
    between the bottom of the image and the bottom border in better
    browsers - the image sits on the text baseline and the <a> element
    extends below that.

    > 3. why does the green border as defined in my css, not show?


    Because you've used a.imga: as the selector. Note the : at the end.

    Steve
    Steve Pugh, Jun 27, 2005
    #2
    1. Advertising

  3. Greg N. wrote:
    > Hi folks,
    >
    > I can't get css hover to work for me. have a look at the tiny test case
    > at http://coolhaus.de/misc/test2.htm
    >
    > questions:
    >
    > 1. why does the hover border work on the second link, but not on the
    > first? The only difference is, that the first img has a class (for
    > image positioning), while the second has no class assigned.
    >
    > 2. in the second case, where the hover does (sortof) work, why is the
    > top hover border missing?
    >
    > 3. why does the green border as defined in my css, not show?


    #3
    a.imga: {border:2px solid green; }
    ^
    remove colon, syntax error

    #2
    border applied to link not image, floating image 'pulls' image out of
    link's span. try:

    .left { float:left; }
    a.imga IMG {border:2px solid green; }
    a.imga:hover IMG {border:2px solid red; }

    #1 related to #2, 'float' and which element your applied the border, I
    this the above CSS is what you where looking for




    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 27, 2005
    #3
  4. Greg N.

    Greg N. Guest

    Jonathan N. Little wrote:

    > #2
    > border applied to link not image, floating image 'pulls' image out of
    > link's span.


    I'm with you, the hover should be applied to the <img> rather than the
    <a>. I've been there before:

    http://coolhaus.de/misc/test3.htm

    So why does this work in FF, but not in IE? Well, I guess, a better
    question is: how do I make this work in IE?
    Greg N., Jun 27, 2005
    #4
  5. Greg N.

    Greg N. Guest

    Greg N. wrote:

    > http://coolhaus.de/misc/test3.htm


    I have just (2 minutes ago) fixed a minor error in the sample referred
    above. It does not affect the problem (the problem persists), but I
    thought it's worth mentioning.
    Greg N., Jun 27, 2005
    #5
  6. Greg N. wrote:

    > Jonathan N. Little wrote:
    >
    >> #2
    >> border applied to link not image, floating image 'pulls' image out of
    >> link's span.

    >
    >
    > I'm with you, the hover should be applied to the <img> rather than the
    > <a>. I've been there before:
    >
    > http://coolhaus.de/misc/test3.htm
    >
    > So why does this work in FF, but not in IE? Well, I guess, a better
    > question is: how do I make this work in IE?


    The flippant answer is *'cuz IE sux!*
    But a little testing shows that IE will not support pseudo-class 'hover'
    on links but not on child elements

    a.x { border: 2px solid green; }
    a.x:hover { border: 2px solid red; }

    a.y span{ border: 2px solid green; }
    a.y:hover span{ border: 2px solid red; }

    <p><a href="#" class="x">Test link 1</a></p>
    <p><a href="#" class="y">Test <span>link 2</span></a></p>

    but then again IE does not support 'hover' on non-link elements...

    ..z { border: 2px solid green; }
    ..z:hover { border: 2px solid red; }

    <div class=z>This is a test</div>

    which is the reason a JavaScript hack is required for CSS fly-out menus
    to work on ol' IE!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 27, 2005
    #6
  7. Greg N.

    Mark Parnell Guest

    Previously in alt.html, "Greg N." <> said:

    > http://coolhaus.de/misc/test3.htm
    >
    > So why does this work in FF, but not in IE?


    IE only supports :hover on <a>.

    > Well, I guess, a better
    > question is: how do I make this work in IE?


    Either try and rewrite the page so you *can* apply the :hover to the
    <a>, or use Javascript. Neither is ideal of course. Luckily a border on
    hover is not too important.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    alt.html FAQ :: http://html-faq.com/
    Mark Parnell, Jun 28, 2005
    #7
  8. in alt.html, Greg N. wrote:
    > Greg N. wrote:
    >
    > > http://coolhaus.de/misc/test3.htm


    a:hover img {}

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Kohtuuhintainen yksiö/huone haussa Oulusta syyskuusta eteenpäin.
    Searching places to sleep on axis Bonn - Tsech - Poland - baltic sea in
    july
    Lauri Raittila, Jun 28, 2005
    #8
  9. Jonathan N. Little, Jun 28, 2005
    #9
  10. Lauri Raittila wrote:

    > in alt.html, Greg N. wrote:
    >
    >>Greg N. wrote:
    >>
    >>
    >>>http://coolhaus.de/misc/test3.htm

    >
    >
    > a:hover img {}
    >


    This will do what I think you want for both IE and the Geckos...

    .left { float: left; }
    .imga IMG { border: 0; vertical-align: bottom; }
    a.imga { border: 2px solid green; }
    a.imga:hover { border: 2px solid red; }

    <a class="imga left" href="http://www.google.de"><img
    src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>
    <a class="imga left" href="http://www.google.de"><img
    src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>

    Note: I floated both links, you see what happens if you don't...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 28, 2005
    #10
  11. Greg N.

    Greg N. Guest

    Lauri Raittila wrote:

    >
    > a:hover img {}
    >


    Lauri, forgive my ignorance, but what is the semantics of that?

    The rule applies when an <img> elements within an <a> is pointed at?
    Greg N., Jun 28, 2005
    #11
  12. Greg N.

    Dylan Parry Guest

    Using a pointed stick and pebbles, Greg N. scraped:

    >> a:hover img {}
    >>

    > The rule applies when an <img> elements within an <a> is pointed at?


    Yes, that's exactly what the above means.

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references
    Dylan Parry, Jun 28, 2005
    #12
  13. in alt.html, Greg N. wrote:
    > Lauri Raittila wrote:
    >
    > >
    > > a:hover img {}


    As noted, don't work in IE, even if I thought it would.

    > Lauri, forgive my ignorance, but what is the semantics of that?
    >
    > The rule applies when an <img> elements within an <a> is pointed at?


    No, rule will apply to img, that is contained in a that is pointed at. Of
    course, you only see difference, if there is something else than single
    image in link.


    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Kohtuuhintainen yksiö/huone haussa Oulusta syyskuusta eteenpäin.
    Searching places to sleep on axis Bonn - Tsech - Poland - baltic sea in
    july
    Lauri Raittila, Jun 28, 2005
    #13
  14. Greg N.

    Els Guest

    Lauri Raittila wrote:

    > in alt.html, Greg N. wrote:
    >> Lauri Raittila wrote:
    >>
    >>> a:hover img {}

    >
    > As noted, don't work in IE, even if I thought it would.


    But it /does/ work in IE. I know there are some circumstances in which
    it may not work (I think we discussed this before some time), but in
    most cases it certainly does work in IE. Check the site in my sig and
    hover over thumbnails. You'll see the border change color, which is
    done by the a:hover img{} rule.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Jun 28, 2005
    #14
  15. in alt.html, Els wrote:
    > Lauri Raittila wrote:
    >
    > > in alt.html, Greg N. wrote:
    > >> Lauri Raittila wrote:
    > >>
    > >>> a:hover img {}

    > >
    > > As noted, don't work in IE, even if I thought it would.

    >
    > But it /does/ work in IE.


    That was my memory as well...

    > I know there are some circumstances in which
    > it may not work (I think we discussed this before some time), but in
    > most cases it certainly does work in IE. Check the site in my sig and
    > hover over thumbnails. You'll see the border change color, which is
    > done by the a:hover img{} rule.


    I made testcase, and it didn't work. So it seems you might need to do
    some tricks to make it works, and you may just well do them
    accidentally..


    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Kohtuuhintainen yksiö/huone haussa Oulusta syyskuusta eteenpäin.
    Searching places to sleep on axis Bonn - Tsech - Poland - baltic sea in
    july
    Lauri Raittila, Jun 28, 2005
    #15
  16. Greg N.

    Els Guest

    Lauri Raittila wrote:

    > in alt.html, Els wrote:
    >> Lauri Raittila wrote:
    >>
    >>> in alt.html, Greg N. wrote:
    >>>> Lauri Raittila wrote:
    >>>>
    >>>>> a:hover img {}
    >>>
    >>> As noted, don't work in IE, even if I thought it would.

    >>
    >> But it /does/ work in IE.

    >
    > That was my memory as well...
    >
    >> I know there are some circumstances in which
    >> it may not work (I think we discussed this before some time), but in
    >> most cases it certainly does work in IE. Check the site in my sig and
    >> hover over thumbnails. You'll see the border change color, which is
    >> done by the a:hover img{} rule.

    >
    > I made testcase, and it didn't work. So it seems you might need to do
    > some tricks to make it works, and you may just well do them
    > accidentally..


    The trick I remember, is that you have to set the styles (colors
    only?) for the regular links too, earlier in the CSS file. Without
    that, it doesn't work on images in IE. (this is from memory though -
    about a year and a half back when I discovered why it worked/didn't
    work)

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Jun 28, 2005
    #16
  17. Els wrote:
    > Lauri Raittila wrote:
    >
    >
    >>in alt.html, Els wrote:
    >>
    >>>Lauri Raittila wrote:
    >>>
    >>>
    >>>>in alt.html, Greg N. wrote:
    >>>>
    >>>>>Lauri Raittila wrote:
    >>>>>
    >>>>>
    >>>>>>a:hover img {}
    >>>>
    >>>>As noted, don't work in IE, even if I thought it would.
    >>>
    >>>But it /does/ work in IE.

    >>
    >>That was my memory as well...
    >>
    >>
    >>>I know there are some circumstances in which
    >>>it may not work (I think we discussed this before some time), but in
    >>>most cases it certainly does work in IE. Check the site in my sig and
    >>>hover over thumbnails. You'll see the border change color, which is
    >>>done by the a:hover img{} rule.

    >>
    >>I made testcase, and it didn't work. So it seems you might need to do
    >>some tricks to make it works, and you may just well do them
    >>accidentally..

    >
    >
    > The trick I remember, is that you have to set the styles (colors
    > only?) for the regular links too, earlier in the CSS file. Without
    > that, it doesn't work on images in IE. (this is from memory though -
    > about a year and a half back when I discovered why it worked/didn't
    > work)
    >

    It does *not* work in IE. IE will only recognize the psuedo-class hover
    on *A*s, thats way JavaScript hack are required for CSS fly-out list
    menus to make them work of IE. A way around this for OP is to apply the
    border change to the A tag. This works...

    ..left { float: left; }
    ..imga IMG { border: 0; vertical-align: bottom; }
    a.imga { border: 2px solid green; }
    a.imga:hover { border: 2px solid red; }

    <a class="imga left" href="http://www.google.de"><img
    src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>
    <a class="imga left" href="http://www.google.de"><img
    src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 28, 2005
    #17
  18. in alt.html, Jonathan N. Little wrote:
    > >>>>>Lauri Raittila wrote:


    > >>>>>>a:hover img {}


    > It does *not* work in IE. IE will only recognize the psuedo-class hover
    > on *A*s,


    Exactly. That's why I but that it to a, not to img.

    Why not go look for Els' page? Works on my IE6:
    http://locusmeus.com/

    > thats way JavaScript hack are required for CSS fly-out list
    > menus to make them work of IE.


    That is because link can't include another link, like menu would need.
    Here we are not trying to make some clueless flyout menu.

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Kohtuuhintainen yksiö/huone haussa Oulusta syyskuusta eteenpäin.
    Searching places to sleep on axis Bonn - Tsech - Poland - baltic sea in
    july
    Lauri Raittila, Jun 28, 2005
    #18
  19. Greg N.

    Els Guest

    Jonathan N. Little wrote:

    > Els wrote:
    >> Lauri Raittila wrote:
    >>
    >>>in alt.html, Els wrote:
    >>>
    >>>>Lauri Raittila wrote:
    >>>>
    >>>>
    >>>>>in alt.html, Greg N. wrote:
    >>>>>
    >>>>>>Lauri Raittila wrote:
    >>>>>>
    >>>>>>
    >>>>>>>a:hover img {}
    >>>>>
    >>>>>As noted, don't work in IE, even if I thought it would.
    >>>>
    >>>>But it /does/ work in IE.
    >>>
    >>>That was my memory as well...
    >>>
    >>>
    >>>>I know there are some circumstances in which
    >>>>it may not work (I think we discussed this before some time), but in
    >>>>most cases it certainly does work in IE. Check the site in my sig and
    >>>>hover over thumbnails. You'll see the border change color, which is
    >>>>done by the a:hover img{} rule.
    >>>
    >>>I made testcase, and it didn't work. So it seems you might need to do
    >>>some tricks to make it works, and you may just well do them
    >>>accidentally..

    >>
    >> The trick I remember, is that you have to set the styles (colors
    >> only?) for the regular links too, earlier in the CSS file. Without
    >> that, it doesn't work on images in IE. (this is from memory though -
    >> about a year and a half back when I discovered why it worked/didn't
    >> work)
    >>

    > It does *not* work in IE.


    Does too :p

    > IE will only recognize the psuedo-class hover
    > on *A*s,


    Correct. the pseudo-class hover /is/ on a, when you apply the style to
    the image inside of it.

    > thats way JavaScript hack are required for CSS fly-out list
    > menus to make them work of IE.


    That's a whole different thing. IE does not support :hover on anything
    else than the <a> element, that's true. But it does work to apply
    styles to elements that are inside the <a> element which is on hover.

    > A way around this for OP is to apply the
    > border change to the A tag. This works...
    >
    > .left { float: left; }
    > .imga IMG { border: 0; vertical-align: bottom; }
    > a.imga { border: 2px solid green; }
    > a.imga:hover { border: 2px solid red; }
    >
    > <a class="imga left" href="http://www.google.de"><img
    > src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>
    > <a class="imga left" href="http://www.google.de"><img
    > src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>


    Yes, that works too, but just to prove to you that IE does understand
    it the way I described, here's a very simple, temporary example:

    http://here.locusmeus.com/temp/doestoo.html

    If you would take out the colour style for a:hover, it wouldn't work.
    I deliberately gave the a:hover style a different colour than the
    borders on the image, so you can be sure it's not the border on the
    <a> element that is changing colour when hovering over the image.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Jun 28, 2005
    #19
  20. Lauri Raittila wrote:
    > in alt.html, Jonathan N. Little wrote:
    >
    >>>>>>>Lauri Raittila wrote:

    >
    >
    >>>>>>>>a:hover img {}

    >
    >
    >>It does *not* work in IE. IE will only recognize the psuedo-class hover
    >>on *A*s,

    >
    >
    > Exactly. That's why I but that it to a, not to img.


    The trick was that for IE you have to remove the text decoration on the link

    a:focus,
    a:hover,
    a:active{
    text-decoration:none;
    }

    >
    > Why not go look for Els' page? Works on my IE6:
    > http://locusmeus.com/
    >
    >
    >>thats way JavaScript hack are required for CSS fly-out list
    >>menus to make them work of IE.

    >
    >
    > That is because link can't include another link, like menu would need.
    > Here we are not trying to make some clueless flyout menu.
    >


    *WHAT?* Who said anything about nesting links? Of course nesting links
    are invalid, but that had nothing to do with IE not recognizing the
    pseudo-class hover on other elements like *LI* elements that are used in
    CSS fly-out menus made with lists....


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 29, 2005
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ben Amada
    Replies:
    7
    Views:
    2,407
    Ben Amada
    Jan 16, 2004
  2. George
    Replies:
    9
    Views:
    4,903
    George
    Oct 25, 2004
  3. Marc
    Replies:
    3
    Views:
    526
    Toby Inkster
    Jan 18, 2005
  4. MZ
    Replies:
    7
    Views:
    829
    Ed Mullen
    Mar 17, 2008
  5. dreamee

    CSS hover image link not working in IE

    dreamee, Oct 1, 2011, in forum: HTML and CSS
    Replies:
    0
    Views:
    1,557
    dreamee
    Oct 1, 2011
Loading...

Share This Page