I've used Vladdy's .htc workaround to make hover work for IE, but it doesn't seem to work on more than one element at a time.
e.g.
.class1, .class2 {
behavior: url('IEFixes.htc');
}
.class1:hover, .class1.hover {
color: #ff0000;
}
.class2:hover, .class2.hover {
color: #ffcc00;
}
Instead of showing class1 as red , it shows as orange, like it does for class2. Am I doing something wrong, or is this a limitation of the .htc?got a link?Unfortunately not. It's an inhouse application for the company that employs me and there's no outside links yet.
So do I take it that it's not meant to behave the way that it does?
It's really rather strange. As I don't really need class2 as much as class1 I've put the behavior of class2 to point to a non-existant htc file. But I still have class2:hover defined because if I remove it then there is no hover behaviour at all on IE.I can not say what the problem is without seeing the code. In my demo page, it works fine with multiple selectors.I know that last statement might be a bit confusing.
To help explain a bit, here's the current code:
.class1 {
behavior: url('IEFixes.htc');
}
.class2 {
behavior: url('dud.htc');
}
/* this gets ignored by IE for some reason*/
.class1:hover, .class1.hover {
color: #ff0000;
}
/* anything marked class1 is shown as this colour on hover, nothing happens hovering class2 */
.class2:hover, .class2.hover {
color: #ffcc00;
}
I also cleared my cache in case it was storing something funny.Actually, I remember running into IE problem with multiple class assignments:
<!-- m --><a class="postlink" href="http://www.vladdy.net/demos/iemcbug.html">http://www.vladdy.net/demos/iemcbug.html</a><!-- m -->
Possible workaround with htc:
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoClassHover()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="RestoreClassHover()" />
<SCRIPT LANGUAGE="JScript">
function DoClassHover()
{ element.className += 'hover';
}
function RestoreClassHover()
{ element.className = element.className.replace(/hover\b/,'');
}
</SCRIPT>
where the CSS will change to
.class1:hover, .class1hover
{ color: #ff0000;
}
.class2:hover, .class2hover
{ color: #ffcc00;
}Thanks Vladdy. The last .htc made it behave even more strangely; it didn't do anything on mouseout.
I've decided to use the original .htc on one of the elements and use dynamic scripting on the other. Works well on IE and Mozilla is ignoring it and using the CSS instead.
e.g.
.class1, .class2 {
behavior: url('IEFixes.htc');
}
.class1:hover, .class1.hover {
color: #ff0000;
}
.class2:hover, .class2.hover {
color: #ffcc00;
}
Instead of showing class1 as red , it shows as orange, like it does for class2. Am I doing something wrong, or is this a limitation of the .htc?got a link?Unfortunately not. It's an inhouse application for the company that employs me and there's no outside links yet.
So do I take it that it's not meant to behave the way that it does?
It's really rather strange. As I don't really need class2 as much as class1 I've put the behavior of class2 to point to a non-existant htc file. But I still have class2:hover defined because if I remove it then there is no hover behaviour at all on IE.I can not say what the problem is without seeing the code. In my demo page, it works fine with multiple selectors.I know that last statement might be a bit confusing.
To help explain a bit, here's the current code:
.class1 {
behavior: url('IEFixes.htc');
}
.class2 {
behavior: url('dud.htc');
}
/* this gets ignored by IE for some reason*/
.class1:hover, .class1.hover {
color: #ff0000;
}
/* anything marked class1 is shown as this colour on hover, nothing happens hovering class2 */
.class2:hover, .class2.hover {
color: #ffcc00;
}
I also cleared my cache in case it was storing something funny.Actually, I remember running into IE problem with multiple class assignments:
<!-- m --><a class="postlink" href="http://www.vladdy.net/demos/iemcbug.html">http://www.vladdy.net/demos/iemcbug.html</a><!-- m -->
Possible workaround with htc:
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoClassHover()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="RestoreClassHover()" />
<SCRIPT LANGUAGE="JScript">
function DoClassHover()
{ element.className += 'hover';
}
function RestoreClassHover()
{ element.className = element.className.replace(/hover\b/,'');
}
</SCRIPT>
where the CSS will change to
.class1:hover, .class1hover
{ color: #ff0000;
}
.class2:hover, .class2hover
{ color: #ffcc00;
}Thanks Vladdy. The last .htc made it behave even more strangely; it didn't do anything on mouseout.
I've decided to use the original .htc on one of the elements and use dynamic scripting on the other. Works well on IE and Mozilla is ignoring it and using the CSS instead.