[SOLVED] Horizontal flyout menu and IE's whitespace bug

[rakker]

This is strange. Having a problem with the famous whitespace bug from IE 7, while thinking all is OK.

Please look with me:
http://www.tipparijs.nl/index.php

CSS for my flyout menu

Code: Select all

/* MENU */

dfn {
   position: absolute;
   left: -1000px;
   top: -1000px;
   width: 0;
   height: 0;
   overflow: hidden;
   display: inline;
}


#menuwrapper { 
   width: 100%; 
}

/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px; 
   width: 100%; 
   
   }
#primary-nav ul { 
   position: absolute; 
   top: 0; 
   left: 100%; 
   display: none; 
   margin-left: -1px;
}
#primary-nav li { 
   
   position: relative;
   padding: 0.7em;
   border-bottom: 1px solid #c3cf4b;

}

/* Styling the basic apperance of the menu elements */
#primary-nav a { 
   color: #000000;
   margin: 0px; 
   padding: 0.4em 0.5em 0.4em 2em; /* some air for it */
   text-decoration: none; 
   background: url(images/li.png) no-repeat 0.5em center;  
   min-height:1em; /* Fixes IE7 whitespace bug*/ 
   display: block;
}

#primary-nav li, #primary-nav li.menuparent { 
   min-height:1em; /* Fixes IE7 whitespace bug*/ 
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive { 
   background-color: #dce59c; 
}

#primary-nav li.menuactive:hover {
background: #c3cf4b;
}

#primary-nav ul li {
background: #e5ebd0;
margin: 0;
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent, 
#primary-nav li.menuparent:hover, 
#primary-nav li.menuparenth { 
   background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat; 
}


/* Styling the apperance of menu items on hover */
#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
   background-color: #dce59c; 
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }


/* section header */
#primary-nav li.sectionheader {
   font-size: 130%;
   font-weight: bold;
   padding: 1.5em 0 0.8em 0.5em;
   background-color: #fff;
   margin: 0;
   width: 100%;
}


/* separator */
#primary-nav li hr.separator {
   display:block;
   height: 0.5em;
   background-color: #abb0b6;
   width: 100%;
   margin:0;
   padding:0;   
   border-top: 1px solid #006699;
   border-right: 1px solid #006699;
}

/*  EINDE MENU */

In the GOOD browers like FF all works OK, atleast in FF3, and even in IE 6 the menu works OK but in IE 7... nope. A little whitespace underneath the list item which flies out appears.
So I deleted this piece:

Code: Select all

#primary-nav li, #primary-nav li.menuparent { 
   min-height:1em; /* Fixes IE7 whitespace bug*/ 
}

Deleting this part feels a bit strange cause you actually want the whitespace fix aswell on the li.menuparent which encloses the flyout. But deleting this solves the whitespace, but introduces a new one. In IE 7 the flyout disappears when approaching it, which might be understandable cause the list item seems to be smaller then it should be. Making the list item a width of 100% solves that but there is the whitespace again.

Love IE

Someone seeing this one?

Greetz,
rakker

[Dr.CSS]

I had to put this in the head...



#primary-nav li.menuparent:hover {margin-bottom:-4px;} /* a HACK!!! for IE7 */

[kermit]

if you're using default menu templates, or have customized one.. there *IS* whitespace in them...

why hack your css when you don't have to?

just go through your menu template and get rid of any unnecessary spaces and line breaks in-between tags, maybe wrap the whole thing in a {strip} block too...

example.. here's one, based on minimal_menu.tpl, iirc..

Code: Select all

{strip}{if $count > 0}<ul id="navigation" class="mainmenu">
{foreach from=$nodelist item=node}{if $node->depth > $node->prevdepth}{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}</li>{elseif $node->index > 0}</li>{/if}
{if $node->current == true}<li><a href="{$node->url}"{if $node->titleattribute ne ''} title="{$node->titleattribute}"{/if}{if $node->accesskey ne ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex ne ''} tabindex="{$node->tabindex}"{/if} class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>{elseif $node->parent == true && $node->depth == 1}
<li class="activeparent"><a href="{$node->url}" class="activeparent"{if $node->titleattribute ne ''} title="{$node->titleattribute}"{/if}{if $node->accesskey ne ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex ne ''} tabindex="{$node->tabindex}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}{elseif $node->type == 'separator'}
<li style="list-style-type: none;"><hr class="separator" />{else}
<li><a href="{$node->url}"{if $node->titleattribute ne ''} title="{$node->titleattribute}"{/if}{if $node->accesskey ne ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex ne ''} tabindex="{$node->tabindex}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>{/if}{/foreach}{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>{/if}{/strip}

[Dr.CSS]

That didn't work so good, check the second level rounded when they have children...

http://multiintech.com/new/  IE7 no work so good, this is the template that I used the CSS I posted on...

Menu template...

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}{strip}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}{if $node->depth > $node->prevdepth}{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}</li>{elseif $node->index >0}</li>{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}<li class="menuactive menuparent"><a class="menuactive menuparent" 
{elseif $node->current == true}<li class="menuactive"><a class="menuactive" 
{elseif $node->haschildren == true}<li class="menuparent"><a class="menuparent"
{else}<li><a {/if}href="{$node->url}">{$node->menutext}</a>{/foreach}{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul></div>{/if}{/strip}

[rakker]

It seems it works now, thanks for the help.

I only added to the head:

Code: Select all

<!--[if IE 7]>
<style type="text/css">
#priary-nav li {margin-bottom: 0px;}
#primary-nav li.menuparent:hover {margin-bottom:0px;} /* a HACK!!! for IE7 */
</style>
<![endif]-->

And applied the CSSMenu.js only for IE 6.
That all should be the trick.

Greetz,
rakker