home / bulletins / 18

 

HierMenus 6.0.4: Release Notes

D.M Ragle, June 23, 2006

The latest release of the Opera Web browser (Opera 9) triggered multiple HierMenus display problems. This impromptu HM maintenance release addresses those problems and is a recommended upgrade for all HierMenus users. In many situations, previous versions of HierMenus will not display menus properly in Opera 9.

As a reminder, though our release articles can be appreciated by and may be useful to all DHTML developers and HierMenus fans, the HierMenus script itself is a licensed product and its use on your site(s) requires a paid license agreement. Contact Barry Pullen or call him at (203) 662-2868 for further information (be sure to let him know how you plan to use HierMenus and tell him a bit about your organization, as well).

Quirks Mode Changes in Opera 9

When routinely testing the latest browser from Opera (9), we immediately noticed discrepancies in the way menus are displayed on certain Web pages. Though the menus themselves would work properly, their display was distorted; especially around the right and bottom edges, where the menus appeared to be not properly dimensioned. A quick peek at what we were seeing will illustrate the difficulties:

A horizontal menu in Opera 9. Notice the missing item separators, and poor (added) spacing on the bottom and right sides of the menu.

A vertical menu in Opera 9. Here the separators are visible, but they are the wrong color; and the sizing on the right and bottom is also incorrect.

To compund the problem, not all Web sites seemed to be affected. On Web sites that were affected, all of the menus were displayed incorrectly; but on Web sites that were not affected all the menus were displayed properly.

Doing a little digging on the Opera Web site, we were able to locate the cause of the differences. The Opera 9 for Windows changelog includes the simple, yet all-telling entry:

Removed box model quirk (box-sizing:border-box;) in quirks mode.

Which explains everything. At least it does if you're familiar with Quirks Mode in the first place. Let's back up a step.

Way back in bulletin 1 we described the steps we needed to take to provide support for the Opera Web browser. Critical in this support was an understanding of Opera's Quirks Mode, which is, for the most part, an Internet Explorer compatible emulation mode. Opera automatically envokes Quirks Mode rendering based on the doctype settings of the page itself. For a more thorough description see this page from Opera's Web site; and to see how Quirks Mode affects HierMenus, see our earlier Release Bulletin 1.

In Opera 9, a major change has been made to Opera's displaying of boxes on Quirks Mode activated pages. Specifically, Opera's Quirks Mode rendering no longer follows the old Internet Explorer box model when applying widths and heights; but instead follows the W3C standard box model. Thus, a box will now be displayed the same (at least width and height wise) whether Opera displays it in Quirks Mode or in Standards Mode.

Unfortunately for us, HierMenus releases prior to today didn't know that; thus it continued to think that it needed to make adjustments to menu heights and widths based on the IE box model whenever Opera reported that it was operating in Quirks Mode. It was in this specific scenario that HM would get the menu displays wrong; which explains why only certain pages were affected (pages that were labeled with a doctype that triggered Opera's Standards Mode were unaffected).

Fortunately for us, the change is extremely simple. Since all of our Quirks Mode specific code has to do specifically with Opera's handling of the box model, we can simply ignore all the Quirks Mode specific logic whenever Opera 9 is present. In our original version HM v6 implementation, we sniffed for Opera's Quirks Mode with the following logic:

HM_OperaQuirk = HM_MenusTarget.document.compatMode != "CSS1Compat";

And in the new release, we simply qualify it for Opera 9:

HM_OperaQuirk = ((HM_MenusTarget.document.compatMode != "CSS1Compat") &&
                 (HM_BrowserVersion < 9));

Now non-standard pages will continue to display the menus the same in both the previous and current versions of Opera.

Conclusion

Though the change is simple, the effect of this problem is fairly dramatic in that any non-standards based pages will display menus incorrectly in Opera 9. For that reason, we recommend that all HierMenus users upgrade to this new HierMenus version. The only file that was changed significantly in this release is the Opera-specific execution script, HM_ScriptOPR.js.