CSS

Expanding Menu Bug Fixed

December 12th, 2008  |  Published in CSS, Javascript, Mootools

As I mentioned yesterday, helpful fellow Mootoolers pointed out a nasty bug in the expanding menu application. This particular bug, which caused the entire menu structure to essentially freeze itself in a fully expanded state, seemed to affect earlier versions of Firefox. One nice coder mentioned Firefox 2.0.0.13, so I downloaded and installed this earlier version and went to work.

Once I had figured out what was going on, the fix was simple: all I had to do was change a class declaration in the main stylesheet. Specifically, I changed “display:inline-block” to “display:block.” Voila, problem solved. So what happened and why did my simple fix straighten it out? Well, menu text in my application demo is enclosed within a span tag, which in the stylesheet had been given the “display:inline-block” declaration. The reason for this is that the javascript has to take the height of this element and use it in the calculations.

The problem was, the earlier Firefox version didn’t understand inline-block and just dropped the declaration altogether. So by the time my span height was used in the code it arrived as NaN (”Not a Number”). Not surprisingly, the code bombed from that point on.

The funny thing is, I can’t remember why I used “display:inline-block” in the first place, instead of plain old “display:block.”