Email conversation
| From | Adrian L. Turner |
|---|
| To | Me |
|---|
| Subject | CSS |
|---|
| Date | 27 March 2006 15:25 |
|---|
Believe it or not, I have only just started using CSS to any great
extent recently. I noticed your article about css a:hover and the issues
with IE. I have also noticed other sites claiming similar problems with
:hover and other elements in IE. I may be missing the plot here, but
this method seems to work fine (in IE and FF) ...
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
A:visited {color: #FFBF00; text-decoration: none}
A:link {color: #FFFF00; text-decoration: none}
A:active {color: #C0FFC0; text-decoration: none}
A:hover {color: #C0FFC0; background-color: lightslategray}
.form_button {cursor:hand}
A:hover .form_button {border:1px solid red;color:blue}
//-->
</style>
</head>
<body>
<a style="height:100px;width:100px;" href=""> Test This </a>
<p></p>
<A href="" style="background-color:transparent">
<input class="form_button" type=button name="B1" value="Button">
</A>
</body>
</html>
Regards,
Adrian Turner
| From | Me |
|---|
| To | Adrian L. Turner |
|---|
| Subject | Re: CSS |
|---|
| Date | 27 March 2006 15:34 |
|---|
Adrian,
> I noticed your article about css a:hover and the issues
> with IE.
IE has no problems at all with :hover on links. It fails to detect it on
everything else though. That is the problem. Try this in Opera and Firefox,
then try it in IE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hover test</title>
<style type="text/css">
li { background: blue; }
li:hover { background: lime; }
</style>
</head>
<body>
<ul>
<li>Hover me</li>
<li>Hover me too</li>
</ul>
</body>
</html>
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Adrian L. Turner |
|---|
| To | Me |
|---|
| Subject | Re: CSS |
|---|
| Date | 27 March 2006 15:51 |
|---|
Sorry, perhaps I didn't explain myself clearly, this method seems to
work with ANY Element Type on IE and Firefox etc...
Notice the button.
...
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
A:visited {color: #FFBF00; text-decoration: none}
A:link {color: #FFFF00; text-decoration: none}
A:active {color: #C0FFC0; text-decoration: none}
A:hover {cursor: crosshair; color: #C0FFC0; background-color:
lightslategray; text-decoration: none}
.form_button {cursor:hand}
A:hover .form_button {border:1px solid red;color:blue}
//-->
</style>
</head>
<body>
<a style="height:100px;width:100px;" href=""> Test This </a>
<p></p>
<A href="" style="background-color:transparent">
<input class="form_button" type=button name="B1" value="Button">
</A>
</body>
</html>
| From | Me |
|---|
| To | Adrian L. Turner |
|---|
| Subject | Re: CSS |
|---|
| Date | 27 March 2006 20:07 |
|---|
Adrian,
> Sorry, perhaps I didn't explain myself clearly, this method seems to
> work with ANY Element Type on IE and Firefox etc...
> Notice the button.
>
> A:hover .form_button {border:1px solid red;color:blue}
You only applied the styles to the element with .form_button class. But it
is still the link that is detecting the hover.
[Ed. In other words, it is a hack to make it look like the button is
detecting the hover. This will only work if the contents of the link are
inline.]
A:hover <-- no matter what element you change, the :hover class is still
attached only to the link. If you attach the :hover pseudo-class to any
other element, it will not work in IE. In my last example, I attached the
:hover pseudo class to an LI element. No links were involved (since links
cannot be the parent of an LI). Try the example I sent in the last email,
and you will see what I mean.
| From | Adrian L. Turner |
|---|
| To | Me |
|---|
| Subject | Re: CSS |
|---|
| Date | 28 March 2006 08:43 |
|---|
Yes I know, I was just trying to get it to work for a button, which it
does. I know the 'a' tag is actually receiving the hover, but it gives
the desired effect. Controls seem to work ok using this method, but
other html elements do not. Thanks for your response. If only all
browsers acted the same !
Regards,
Adrian Turner