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/ 
