Stylesheets - Image Links and Hover not working on IE

Author

Image Links and Hover not working on IE

Cate Archer

2007-04-01, 10:17 pm

I want to have a border around an image that changes color when the
mouse hovers over it. The following code works perfectly in FireFox
but not in Internet Exploiter. The text link changes color but the
image link stays the same. Anybody know how I can make it work in IE?
I saw a web site where the guy got it to work in both browsers.

<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style>
a:link {
color: #00FF00;
text-decoration: underline;
}
a:visited {
color: #ffff00;
text-decoration: underline;
}
a:hover {
color: #ff0000;
border: thin none #FFFFFF;
text-decoration: underline;
}
a:active {
color: #00ffff;
text-decoration: underline;
}
</style>
</head>

<body>

<a href="http://www.spreadshirt1.com">Hello World</a>
<br>
<br>
<br>
<a href="http://www.spreadshirt2.com"><img
src="tshirt_images/bomb_cod_160.jpg" border=2></a>

</body>
</html>

Els

2007-04-01, 10:17 pm

Cate Archer wrote:

> I want to have a border around an image that changes color when the
> mouse hovers over it. The following code works perfectly in FireFox
> but not in Internet Exploiter. The text link changes color but the
> image link stays the same. Anybody know how I can make it work in IE?
> I saw a web site where the guy got it to work in both browsers.

[snip code]

http://locusoptimus.com/css-tricker...es-on-hover.php

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Els

2007-04-02, 6:22 pm

Jukka K. Korpela wrote:

> Scripsit Els:
>
> - -
>
> That document discusses a phenomenon that cannot be observed on my copy of
> IE 6. The demo image behaves differently from what the page says. I suppose
> some old, unpatched versions of IE 6 needed the "trigger" described on the
> page.

That's a problem with IE/Microsoft: they keep changing the behaviour
without telling anyone ;-)
FWIW, my IE6 is now a standalone version, and still exhibits the
behaviour described. I wrote that page when IE7 was still in Beta, and
then my IE6 was native and updated and it did show the described
behaviour. I'd be interested to know which current versions of IE6 do
and which don't still need that trigger. What version and of IE6 on
which OS are you using?

> IE 6 supports :hover for links only, not for <a> elements for example. To
> set border color for image links, you need to set border or border-color for
> :hover img. In this case, :hover is being used for links only, so the IE 6
> limitations on :hover are not the issue.

True, but the page still explains also how to do what the OP wants. I
could have mentioned that though, you're right.

[snip good explanation on how to change border(-colour)s on image
links]

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Jukka K. Korpela

2007-04-02, 6:22 pm

Scripsit Els:

> I'd be interested to know which current versions of IE6 do
> and which don't still need that trigger. What version and of IE6 on
> which OS are you using?

I used IE 6.0.2800.1106 on Windows 98.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Els

2007-04-03, 3:17 am

Jukka K. Korpela wrote:

> Scripsit Els:
>
>
> I used IE 6.0.2800.1106 on Windows 98.

Hmm.. yesterday I fired up my kids old Win 98 laptop, navigated to
Internet Explorer (I let them use Firefox always), and checked the
version: 6.0.2800.1106 (SP1). The behaviour of the image link was
exactly as on my example.
I then went to Microsoft Update center, downloaded all the latest
security patches, restarted the machine, and checked again - the image
link still did what I wrote it did.
Is there anything else in which your version could be different from
mine?

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

boclair

2007-04-03, 10:21 pm

Els wrote:
> Jukka K. Korpela wrote:
>
>
> Hmm.. yesterday I fired up my kids old Win 98 laptop, navigated to
> Internet Explorer (I let them use Firefox always), and checked the
> version: 6.0.2800.1106 (SP1). The behaviour of the image link was
> exactly as on my example.
> Is there anything else in which your version could be different from
> mine?

I am seeing the same behaviour with the image links on that page as
Jukka Korpela. For IE I have IE 6.0.2900.2180 and XP Pro both with all
patches.

However the IE problem created by IE treating action pseudo class as
focus also is evident if the calling page is "re-got" from cache, such
as when the user does this with his browser's back button. I understand
that this has been fixed with IE7. Is this right?

Louise

Els

2007-04-04, 3:25 am

boclair wrote:

> Els wrote:
>
> I am seeing the same behaviour with the image links on that page as
> Jukka Korpela. For IE I have IE 6.0.2900.2180 and XP Pro both with all
> patches.

Does that mean you didn't upgrade to IE7 then? May I ask why?
I did (XP Home), and I'm not about to go back to IE6 to check whether
I can replicate what you and Yukka are seeing ;-)

> However the IE problem created by IE treating action pseudo class as
> focus also is evident if the calling page is "re-got" from cache, such
> as when the user does this with his browser's back button.

Not sure if I understand what you mean. IE always neews the :active
style where other browsers use :focus. To test this, use your tab key
to jump from link to link (which should give each on focus as you hit
it), without having a style for :active in your stylesheet.
What you see when using the back button, is the actual :active style,
just as in other browsers as far as I know. It's just :focus that
doesn't work in IE.

> I understand that this has been fixed with IE7. Is this right?

Just tested: IE7 still needs the :active rules to act instead of
:focus. Without :active styles, nothing happens when a link receives
focus.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/