Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

can't get css hover to work on link borders

9 views
Skip to first unread message

Greg N.

unread,
Jun 27, 2005, 11:00:37 AM6/27/05
to
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?

Steve Pugh

unread,
Jun 27, 2005, 12:50:46 PM6/27/05
to
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

Jonathan N. Little

unread,
Jun 27, 2005, 1:40:00 PM6/27/05
to

#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

Greg N.

unread,
Jun 27, 2005, 3:13:01 PM6/27/05
to
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.

unread,
Jun 27, 2005, 4:01:22 PM6/27/05
to
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.

Jonathan N. Little

unread,
Jun 27, 2005, 5:51:00 PM6/27/05
to
Greg N. wrote:

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!

Mark Parnell

unread,
Jun 27, 2005, 7:16:18 PM6/27/05
to
Previously in alt.html, "Greg N." <yodel...@yahoo.com> 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/

Lauri Raittila

unread,
Jun 27, 2005, 7:19:58 PM6/27/05
to
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

Jonathan N. Little

unread,
Jun 27, 2005, 10:12:45 PM6/27/05
to
Lauri Raittila wrote:

> in alt.html, Greg N. wrote:
>
>>Greg N. wrote:
>>
>>
>>>http://coolhaus.de/misc/test3.htm
>
>
> a:hover img {}
>

Nope! IE won't cooperate, you'll have to pin your hopes on IE7! ;-)

Jonathan N. Little

unread,
Jun 27, 2005, 10:33:03 PM6/27/05
to
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...

Greg N.

unread,
Jun 28, 2005, 5:38:21 AM6/28/05
to
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?

Dylan Parry

unread,
Jun 28, 2005, 5:47:00 AM6/28/05
to
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

Lauri Raittila

unread,
Jun 28, 2005, 6:23:46 AM6/28/05
to
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.

Els

unread,
Jun 28, 2005, 6:44:09 AM6/28/05
to
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 -

Lauri Raittila

unread,
Jun 28, 2005, 6:52:33 AM6/28/05
to
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..

Els

unread,
Jun 28, 2005, 7:09:42 AM6/28/05
to
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)

Jonathan N. Little

unread,
Jun 28, 2005, 1:25:39 PM6/28/05
to
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>

Lauri Raittila

unread,
Jun 28, 2005, 1:26:44 PM6/28/05
to
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.

Els

unread,
Jun 28, 2005, 1:48:58 PM6/28/05
to
Jonathan N. Little wrote:

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.

Jonathan N. Little

unread,
Jun 28, 2005, 8:24:56 PM6/28/05
to
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....

Lauri Raittila

unread,
Jun 29, 2005, 2:11:42 AM6/29/05
to
in alt.html, Jonathan N. Little wrote:
> Lauri Raittila wrote:
> > in alt.html, Jonathan N. Little wrote:

> > 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?*

[Plonked for annoying all caps]

> Who said anything about nesting links?

Me. TÝou were talking something about flyout menus, using it as a proof
of thing it is irreleated.

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

Yes, but you can make flyouts in IE. You just can't put links in them. So
flyout menu is impossible, which is totally different from styöling some
image inside a element.

Jonathan N. Little

unread,
Jun 29, 2005, 9:59:13 AM6/29/05
to
Lauri Raittila wrote:
> in alt.html, Jonathan N. Little wrote:
>
>>Lauri Raittila wrote:
>>
>>>in alt.html, Jonathan N. Little wrote:
>
>
>>>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?*
>
>
> [Plonked for annoying all caps]

Touchy aren't we?


>
>>Who said anything about nesting links?
>
>
> Me. TÝou were talking something about flyout menus, using it as a proof
> of thing it is irreleated.
>
>
>>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....
>
>
> Yes, but you can make flyouts in IE. You just can't put links in them. So
> flyout menu is impossible, which is totally different from styöling some
> image inside a element.
>

a:hover img {
border: 2px solid rgb(204,0,51);

Els

unread,
Jun 29, 2005, 10:22:19 AM6/29/05
to
Jonathan N. Little wrote:
> Lauri Raittila wrote:
>> in alt.html, Jonathan N. Little wrote:
>>
>>> 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....
>>
>> Yes, but you can make flyouts in IE. You just can't put links in them. So
>> flyout menu is impossible, which is totally different from styöling some
>> image inside a element.
>
> a:hover img {
> border: 2px solid rgb(204,0,51);
> }

That's what Lauri said, and you replied "Nope! IE won't cooperate,
you'll have to pin your hopes on IE7! ;-)" to that.

Am I missing something?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Now playing: Rod Stewart - Hot Legs

Jonathan N. Little

unread,
Jun 29, 2005, 10:55:50 AM6/29/05
to
Lauri Raittila wrote:

> in alt.html, Jonathan N. Little wrote:
>
>>Lauri Raittila wrote:
>>
>>>in alt.html, Jonathan N. Little wrote:
>
>
>>>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?*
>
>
> [Plonked for annoying all caps]

(message complete, Damn! Sent the wrong message, this on got out before
I was finished!)

Touchy aren't we?


>
>
>>Who said anything about nesting links?
>
>
> Me. TÝou were talking something about flyout menus, using it as a proof
> of thing it is irreleated.
>
>
>>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....
>
>
> Yes, but you can make flyouts in IE. You just can't put links in them. So
> flyout menu is impossible, which is totally different from styöling some
> image inside a element.
>
>
>

A:hover IMG{
border: 2px solid rgb(204,0,51);
}

Doesn't work in IE by itself like in Gecko, but requires the the
addition of

A:hover {
text-decoration: none;
}

removal of the link underline on hover to work in IE. Strangely enough
just removing text-decoration on he link all together does NOT work in
IE, i.e,:

a {
text-decoration: none;
}

Not sure what you would do if you desired no underline on you link at
all times...Before I discovered the very specific quirk above I
incorrectly associated that it was failing to restyle on hover the IMG
as a child the A as related to IE not supporting hover pseudo-class
other elements...

B:hover, SPAN:hover and LI:hover work in Gecko but not in IE. The last
is required in many CSS fly-out, hence my reference. I said nothing
about nesting links.

So 'A:hover [child element]' does work in IE if you remove the
text-decoration on the containing link upon hover as well. But only
certain style properties can be change though. You can change the
border, font properties, and color, but not the background....

A:hover {
text-decoration:none;
}

A:hover SPAN{ color: white; background-color: blue; }

<a href="#">This is a <span>Link</span> to nowhere</a>

Not sure why you would do this, but the background color is not set in
IE, but does work in FF, Moz, NN, and Opera...

Els

unread,
Jun 29, 2005, 11:14:58 AM6/29/05
to
Jonathan N. Little wrote:

> A:hover IMG{
> border: 2px solid rgb(204,0,51);
> }
>
> Doesn't work in IE by itself like in Gecko, but requires the the
> addition of
>
> A:hover {
> text-decoration: none;
> }

No, it doesn't.
a:hover{color:red;}
will do. There really is no need to do anything about the
text-decoration.

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

> removal of the link underline on hover to work in IE. Strangely enough
> just removing text-decoration on he link all together does NOT work in
> IE, i.e,:
>
> a {
> text-decoration: none;
> }

That's because we're trying to get the :hover to work, not the link
itself. The border on the image is already working.



> A:hover SPAN{ color: white; background-color: blue; }
>
> <a href="#">This is a <span>Link</span> to nowhere</a>
>
> Not sure why you would do this, but the background color is not set in
> IE, but does work in FF, Moz, NN, and Opera...

It does work in IE too, if you would have set a background color for
the a:hover too.
a:hover{background-color:white;color:blue;}

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

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Now playing: Don McLean - American Pie

Jonathan N. Little

unread,
Jun 29, 2005, 11:58:57 AM6/29/05
to
Els wrote:

Ok I think I get what IE doing, to get

A:hover [ChildElement] {...}

to function you have to add

A:hover {...}

to 'set' the hover 'trap' on the A element where as the orther browsers
can recoginize the trap with single rule that included the child element...

Ah-ha

Els

unread,
Jun 29, 2005, 12:22:07 PM6/29/05
to
Jonathan N. Little wrote:

> Ah-ha

:-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Now playing: Só Pra Contrariar - Tão Só

0 new messages