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
Related posts brought to you by Yet Another Related Posts Plugin.
thanks so much for this tip. it saved me hours on debugging nice menus in IE6.
I was having an issue where the entire menu was not showing up. In debugging css, i figured out that the right and left padding i had on ul.nice-menu li was making the whole menu disappear in IE6. Once i fixed it i was having the hover issue but the .htc file worked perfectly. thanks!
I was able to fix my bug by making the containing div and the div below relative and adjusting the z-indexs there.
How can I use this CSS to make inline horizontal navigation menu?
Where is this layout.css file???? I don’t have this file in my Drupal.
Regards
Stijn Claessen