Forum Moderators: open
<div class="vote" onmouseover="this.className='voteh'" onmouseout="this.className='vote'">
But keep the onmouse attributes as part of the HTML comments/conditions.
<div class="vote" <!--[if IE]>onmouseover="this.className='voteh'" onmouseout="this.className='vote'"><![endif]-->>
But I need to make sure this still passes through the validator and doesn't screw up Opera and Gecko.
But I need to make sure this still passes through the validator and doesn't screw up Opera and Gecko.
This is why the .htc method used in the whatever:hover [google.com] method is actually pretty good; since no other browser but IE can understand what the weird nonstandard htc 'behavior' property means, and because it won't choke the validator if you stick it inside an IE conditional comment, you can solve almost all the major problems you mention at once.
This is also the reason for rewriting the elements of a specific class or id using the DOM [google.com] when - and only when - the page is loaded by IE.
The basic strategy is this:
If I recall correctly, there is some cross-browser issue with writing events such as 'onmouseover' into html using the DOM, but there are alternate methods - one approach can be seen in some of the more modern techniques for generating image rollovers [google.com], and there's always the javascript forum [webmasterworld.com] for really tricky problems...
So to summarize, you'd have something like this in the page <head>:
<!--[if IE]>
<style>
body {
behavior:url(path/to/file.htc);
}
</style>
<![endif]-->
...followed by a script that rewrites the desired elements when the page loads.
-B
:hover<!--[if [b]lt IE 7[/b]]>
<style>
body {
behavior:url(path/to/file.htc);
}
</style>
<![endif]-->If you want to continue using your current code, then you can't have a conditional comment within the
divdiv<div class="vote"><!--[if lt IE 7]><div class="ie-vote" onmouseover="this.className='voteh'" onmouseout="this.className='vote'"><![endif]-->But in both cases you are hitting against your stated primary objective, with is WCAG AAA accessibility. Your code might pass a check with an accessibility validator, but it may still contain accessibility problems. Are we talking about a mouseover menu here? What happens when the user is navigating using the keyboard?
