Firefox class name and space idiosyncrasy

We’re currently reworking www.florame.co.uk to improve it’s search engine ranking from virtually non-existent to (hopefully) first page for various inflections of organic aromatherapy, organic essential oils and all sorts of other aromatherapy products.

Despite the on-going debate on whether search engine crawlers prefer pretty XHTML or not, I still believe strongly that having your site’s content as the dominant code on every page MUST be better than having a plethora of tags (aka tag soup) but that’s for another post. So, with my feelings on XHTML (or at least neat HTML) in mind one of our recommendations was to re-work the site’s code –most importantly with the removal of the JavaScript menu at the top which is seriously impeding the site’s ranking. I decided we should opt for a form of CSS menu and those in the know, know there are only a few available options, for reference we used Suckerfish drop down menu.

The Suckerfish CSS drop down menu has been fairly heavily tested but I think I’ve found an issue with Firefox, basically the JavaScript marks up the LI with a hover class (sfhover) which then ensures it works as expected (this isn’t needed in IE7 or FF btw). The catch I’ve found however is that in FF1.5 (will test in 2.0) with scripts enabled, the menus are staying shown.

After a little head scratching the issue was narrowed down to this line of JavaScript:

this.className = this.className.replace(new RegExp(" sfhover\\b"), "");

Thanks to Firebug I was able to step through the code and check out the properties at every stage, in this instance I found that Firefox trims the leading and trailing space from the className so instead of it reading class="sfhover" as it is written, it had class="sfhover" which may be correct in some ways but obviously cocked up the regEx.

The solution is really rather simple, just change the space so it’s optional:

this.className = this.className.replace(new RegExp("\\s?sfhover\\b"), "");

It’s not an ideal fix but in the case of Florame organic aromatherapy it sorted the issue :) I’m going let Mozilla know about this as in some ways I think this is a glitch (though I can see their thinking that the developer didn’t mean to add the leading space) to see what they say. It wouldn't surprise me though if it was something I had done wrong!

For reference, the entire menu script now reads:

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {...}

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");

    for (var i=0; i<sfEls.length; i++) {...}

    for (var i=0; i<sfEls.length; i++) {

        sfEls[i].onmouseover=function() {...}

        sfEls[i].onmouseover=function() {
            this.className += " sfhover";
        }

        sfEls[i].onmouseout=function() {...}

        sfEls[i].onmouseout=function() {
            this.className = this.className.replace(new RegExp("\\s?sfhover\\b"), "");
        }

    }

}

if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

Update 7th May 2007: Darren over at Forma3 has come up with a new an improved version of the SuckerFish menu which includes a number of nice improvements and is well worth checking out: CSS drop down menus with persistent top level menu styling