By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,625 Members | 2,235 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,625 IT Pros & Developers. It's quick & easy.

Image Links and Hover not working on IE

P: n/a

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>

Apr 1 '07 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Els
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-trickery...s-on-hover.php
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Apr 1 '07 #2

P: n/a
Scripsit Els:
>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?
- -
http://locusoptimus.com/css-trickery...s-on-hover.php
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.

IE 6 supports :hover for links only, not for <aelements 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.

Rather, the issue is that the code posted sets link colors, not border
colors for images used as links. (The code also sets border: thin none
#FFFFFF rather pointlessly - how much do border color and thickness matter
when there is no border?)

When you have <a href="..."><img ...></a>, then the img element inherits its
parent's color when _no_ style sheet sets the img element's color. Moreover,
the initial value for border-color is the element's color value.

Thus, apparently Firefox has a default browser style sheet different from
that of IE, as regards to setting border colors of image links in different
states. This shouldn't really surprise us, should it?

When setting properties, it is best to set the property you want to set,
instead of relying on inheritance and initial values, which are like a
smiling cat (look very nice on the surface but surprise people who rely on
them). Thus, instead of setting color for a:hover, set

a:hover img { border-color: #f00; }

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

Apr 2 '07 #3

P: n/a
Els
Jukka K. Korpela wrote:
Scripsit Els:
>>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?
- -
>http://locusoptimus.com/css-trickery...s-on-hover.php

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 <aelements 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/
Apr 2 '07 #4

P: n/a
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/
Apr 2 '07 #5

P: n/a
Els
Jukka K. Korpela wrote:
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.
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/
Apr 3 '07 #6

P: n/a
Els wrote:
Jukka K. Korpela wrote:
>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.

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
Apr 3 '07 #7

P: n/a
Els
boclair wrote:
Els wrote:
>Jukka K. Korpela wrote:
>>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.

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.
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/
Apr 4 '07 #8

This discussion thread is closed

Replies have been disabled for this discussion.