Top navigation Horizontal Menu appears below the content when using Nice Menus with Zen layout - Drupal
March 13, 2009 by MK
Filed under CSS, Software Development, web development
While working with a client hosting a VOIP based solutions web site on Drupal. The top navigation menu was hiding underneath the content DIV. We were using the Nice Menus along with the Zen layout.
BUG - The top navigation menu was moving underneath the content DIV.
And this was happening only for IE7 and IE6, Firefox was working fine. So I used bit of a CSS hack for IE browsers and made following changes to colmask class in layout.css. This made the menus show up fine.
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
*z-index:-1; /* Adding this is the key */
}
Also on another note Nice Menus will not render the hover effect in IE6. IE6 only works with hover for anchor tags and since Nice Menus is using lists, hover on lists will not work in IE6.
To fix this issue you can use csshover.htc, you just need to add this to behavior of the body like following in the CSS file and you will be good to go.
body { behavior:url("csshover.htc"); }
Remember - csshover.htc needs to be copied to the document root of your web application AND not to relative root of CSS.
What is .htc extension?
Its a Jscript file (csshover.htc) and is added to the page via a Microsoft proprietary "behavior" rule in the CSS file. Another way of adding this to the page is
<head>
…title element, meta tags, etc…
<style type="text/css">
/* some ordinary CSS rules… */
</style>
<!– The line below starts the conditional comment –>
<!–[if IE]>
<style type="text/css">
body {behavior: url(csshover.htc);}
</style>
<![endif]–> <!– This ends the conditional comment –>
</head>
We don’t want our CSS to fail validation, so a conditional comment is created to contain a separate style sheet to hold our behavior rule.
csshover.htc file can be downloaded from here - http://www.xs4all.nl/~peterned/csshover.html
