HierMenus CENTRAL: HierMenus In Progress. HM5 Status Report: Adding Opera (3/5)

[previous] [next]

Overflowing Your Borders

The first oddity we encountered in Opera display pertains to how it deals with an element's borders when the overflow property of the element is set to hidden. According to the CSS2 specs, when an element is set to overflow:hidden; then the contents of that element are not to be drawn outside of the element's containing block (and recall that in CSS2 speak, the element's "containing block" is represented by the outer edge of its padding, but not borders or margins).

In Opera, we found that this was the actual behavior half the time; the other half of the time, inner content was allowed to be displayed over the top of the containing element's borders. Specifically, inner content was allowed to be displayed over the containing element's top and left borders, but not their bottom or right borders. A quick example should make this point clear.

Have a look at the following box:

Which we defined as follows:

<div id="outerBox" 
     style="position:absolute; top:0px; left:0px;
            border:10px black solid; width:150px; 
            height:90px; background-color:lightgrey; 
            overflow:hidden">
   <div id="innerBox"
        style="position:absolute; top:0px; left:0px; 
               width:130px; height:70px; 
               border:10px red solid; 
               background-color:white">
       Inner box text.
   </div>
   Outer box text.
</div>
<p><a href="#" 
      onclick="moveBox('innerBox','up');
               return false";>Up</a>
   <a href="#" 
      onclick="moveBox('innerBox','right');
               return false";>Right</a>
   <a href="#" 
      onclick="moveBox('innerBox','down');
               return false";>Down</a>
   <a href="#" 
      onclick="moveBox('innerBox','left');
               return false";>Left</a></p>

If you've got a later version browser supporting JavaScript, you can shift the inner box around by clicking the Up, Right, Down, and Left links above (note: the actual box for the live example is initially defined outside the browser window, and is then moved to the desired position after the page is loaded). What you will see in Opera 7 is that the red-bordered inner box is allowed to overflow the top and left borders of the outer box; but not the bottom, or right borders. We found that Opera displayed this same beahavior in both standards and quirks mode. In HM, this caused us a problem in scrolling menus, which are allowed to scroll beneath the scroll bars and could then be seen when scrolling upwards (as they scrolled over the menu's border itself).

This is a minor problem. Most implementations will not even run into it, and for those that do there are a variety of workarounds. In the code above, for example, we could solve the problem by simply adding a box with no border between the inner and outer box, marking it as the overflow container:

Up Right Down Left

And the code:

<div id="outerBox2" 
     style="position:absolute; top:0px; left:0px;
            border:10px black solid; width:150px; 
            height:90px; background-color:lightgrey; 
            overflow:hidden">
   <div id="borderBox"
        style="position:absolute; top:0px; left:0px; 
               width:150px; height:90px;
               overflow:hidden">
      <div id="innerBox2"
           style="position:absolute; top:0px; left:0px; 
                  width:130px; height:70px;
                  border:10px red solid; 
                  background-color:white">
          Inner box 2 text.
      </div>
   </div>
   Outer box 2 text.
</div>
<p><a href="#" 
      onclick="moveBox('innerBox2','up');
               return false";>Up</a>
   <a href="#" 
      onclick="moveBox('innerBox2','right');
               return false";>Right</a>
   <a href="#" 
      onclick="moveBox('innerBox2','down');
               return false";>Down</a>
   <a href="#" 
      onclick="moveBox('innerBox2','left');
               return false";>Left</a></p>

Another approach that could work with positioned elements, and the one we will utilize in HM, is to create an inner element which is bordered within the containing element, but with a negative top offset such that the inner element's top border overlaps the containing element's top border. This inner element can then be set with a high z-index, forcing it to appear "over" the top of the inner content. While this approach may seem more involved than the earlier solution, it turned out to be the perfect answer for HM, as HM is already creating inner, high z-index elements (namely, the scroll bars for the menus themselves) and therefore these elements needed only to be slightly redefined and positioned to solve the problem. If you choose this approach, you'll need to take special care that your inner element--the one with the negative offset--isn't so tall or wide that it covers your actual inner box content.

As we've seen, this minor issue is easily conquered. But the next thing we discovered was a bit more difficult...

[previous] [next]