Tabs Rollover in MSIE

Tabs Rollover in MSIE

by Urs Hunkler -
Number of replies: 9
Picture of Core developers

MSIE does not support the CSS pseudo-class ":hover", so the rollover of the tabs does not work in MSIE. I think it's a pity for all MSIE users.

Inspired by Jon's posting and Martin's reaction in http://moodle.org/mod/forum/discuss.php?d=23512#111782 I added a MSIE specific behavior to Moodle to extent MSIE to be able to react to the CSS pseudo-class ":hover". This is not programmed by me but a much discussed solution for this "problem".

I hope it is in everybody's interest. Does it work for you?

Urs

Average of ratings: -
In reply to Urs Hunkler

Re: Tabs Rollover in MSIE

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Not for me on moodle.org under IE 6 ...

Does this CDATA thing in javascript.php mean that the file only loads in IE?

<style type="text/css">/*<![CDATA[*/ body{behavior:url(<?php echo $CFG->wwwroot ?>/lib/csshover.htc);} /*]]>*/</style>
In reply to Martin Dougiamas

Re: Tabs Rollover in MSIE

by Urs Hunkler -
Picture of Core developers

"Not for me on moodle.org under IE 6 ..."

I read somewhere about problems with the behavior for MSIE 6 under win XP. Under w2k I saw the tabs rollover on moodle.org working after somehow 10 force reloads.

"Does this CDATA thing in javascript.php mean that the file only loads in IE?"

No, it is just XHTML:

"4.8. Script and Style elements

In XHTML, the script and style elements are declared as having #PCDATA content. As a result, < and & will be treated as the start of markup, and entities such as &lt; and &amp; will be recognized as entity references by the XML processor to < and & respectively. continue ..."

Urs

In reply to Martin Dougiamas

Re: Tabs Rollover in MSIE

by Urs Hunkler -
Picture of Core developers
MSIE 6 under XP is very slow with the rollover on some computers. Could please as many people as possible test the tab rollover on moodle.org with MSIE to find out if there is a general problem.

If so I think this odd effect is worse than having no rollover at all and we should take the hack out again.

Thank you very much for your assistance
Urs
In reply to Urs Hunkler

Re: Tabs Rollover in MSIE

by Helen Foster -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Tab rollover seems fine for me using IE 6 and XP.

Thanks for the good work you are doing! smile

In reply to Helen Foster

Re: Tabs Rollover in MSIE

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
When I hover over the active tab, say, the whole row takes a long slow blink and the tabs dissappear for a second. You aren't seeing that in IE?

In Firefox and Safari the movement is instantaneous.
In reply to Martin Dougiamas

Re: Tabs Rollover in MSIE

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
I just tried on a second Windows machine I have here and it's the same thing - really sluggish.  sad
In reply to Urs Hunkler

Re: Tabs Rollover in MSIE

by Jeffery Watkins -
IE6 on WinXP SP2 worked fine for me.  A little slow at first, but fine after cached.

Jeff
In reply to Urs Hunkler

Re: Tabs Rollover in MSIE

by John Papaioannou -
For me this raises another problem: using behaviors is not standards-valid CSS.

Now I know that there is no harm done, per se, but since we 're going to all this trouble to make the HTML valid XHTML 1.0 Transitional, it follows IMHO that we should be taking a similar approach with CSS. If I recall correctly, that's why by default the mozilla-specific rounded corners have migrated to non-default themes (even though they are valid CSS 2!).

Similarly, the "fix block width" hack isn't implemented as a behavior for the same reason.

IMHO this kind of JavaScript should only be included after a browser detect or in a conditional comment block. Of course you wouldn't be able to attach it with CSS, but you could still dynamically attach the mouseover/mouseout events with JS.

That said, I really don't like all this myself. The best solution would be to really cut down on the markup and visual goodies for the tabs. If we just make each tab a (block) link tag, then :hover will be respected by IE just fine. What I 'd like to see in Moodle is this. It's not so catchy, maybe, but it works across all browsers and it's clear and appealing to the eye.

Just my two pence wink