Last updated March 7, 2009. Created by lbourn on March 7, 2009.
Log in to edit this page.

Menus can get cut off when the sidebars use the overflow: hidden; CSS declaration. This declaration is usually necessary to prevent floated sidebars from dropping to the bottom of the page in IE6 when the width of the content exceeds the width of the sidebars.

However, it's possible to implement the IE6 fix without cutting of Nice Menus. A themer need only limit the scope of the overflow: hidden; declaration.

What follows is an example from the Nirvana theme. Here's the bulk of the CSS that creates a content-first, variable three-column layout derived from the "Holy Grail" technique:

  #columns-wrapper {
    }
    #columns-wrapper .column { /* all three columns use this */
      float: left;
      }
    #main { /* main center column */
      /* left point: 180px */
      overflow: hidden; /* prevents breakage in IE6 */
      padding: 0;
      }
    #left-sidebar,
    #right-sidebar {
      width: 160px; /* sets width of sidebars */
      }
      #left-sidebar div.block,
      #right-sidebar div.block {
        overflow: hidden; /* prevents breakage in IE6 */
        width: 160px; /* equals width of sidebars */
        }
    #left-sidebar { /* left point: 0px */
      }
      .both-sidebars #left-sidebar {
        margin: 0 0 0 -780px; /* equals width of #page minus width of #left-sidebar */
        }
      .left-sidebar #left-sidebar {
        margin: 0 0 0 -960px; /* equals width of #page */
        }
    #right-sidebar { /* left point: 800px (960px-160px) */
      margin: 0 0 0 20px; /* needed to push #right-sidebar to right edge */
      }

Pay close attention to these lines:
      #left-sidebar div.block,
      #right-sidebar div.block {
        overflow: hidden; /* prevents breakage in IE6 */
        width: 160px; /* equals width of sidebars */
        }

Instead of applying overflow: hidden; to entire regions (say, .column or #left-sidebar), this CSS applies only to the blocks inside of the sidebars. This will prevent breaking the layout in IE6 and allow themers the flexibility to exempt specific blocks from hiding overflowing content.

However, this CSS is still general enough to apply to Nice Menus. To fix this, we need to add an override:

/* Overflow exception */
#left-sidebar div.block-nice_menus,
#right-sidebar div.block-nice_menus {
  overflow: visible !important;
  }

Viola!

(Originally posted by Todd Nienkerk on December 1, 2008 - 17:09)

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.