Arg.
I lost hair over this about a year ago, and just hacked it away. But, I want to find the real solution.
I have a dropdown menu and IE6 and 7 show some whitespace under a single item in the dropdown who also has its own sub-ul.
All the items here have Haslayout. Removing all whitespace as a test does NOT remove the space, so I’ve pretty much decided this can’t be the actual whitespace bug. That always resolves if you throw your code into one big long line.
It does go away if I comment out the sub ul though. However, changing font-size, line-height, even setting height of that sub ul to 0 does not remove the whitespace. So not sure where this space is coming from, except it is somehow caused by the sub-sub menu.
HTML4 strict, and yes, the wrapping div is holding a bg:
<div id="menu">
<ul>
<li class="eerst"><a href="index.html">Home</a>
<ul>
<li><a href="foo.html">foo</a></li>
</ul>
</li>
<li><a href="bedrijven.html">Bedrijven</a>
<ul>
<li class="pijl"><a href="bedrijven.html#kantoor">Kantoor</a>
[b] <ul>
<li><a href="bedrijven.html#intern">Intern</a></li>
<li><a href="bedrijven.html#arch">Archief</a></li>
</ul>[/b]
</li>
<li><a href="bedrijven.html#indus">Industrie</a></li>
<li><a href="bedrijven.html#ict">ICT</a></li>
</ul>
</li>
<li><a href="foo.html">foo</a>
<ul>
<li><a href="foo.html">foo</a></li>
<li><a href="foo.html#foo">foo</a></li>
<li><a href="foo.html#foo">foo</a></li>
<li><a href="foo.html#foo">foo</a></li>
</ul>
</li>
<li><a href="foo.html">foo</a></li>
<li><a href="foo.html">foo</a>
<ul>
<li><a href="foo.html">foo</a></li>
</ul>
</li>
<li><a href="foo.html">foo</a></li>
<li class="laatst"><a href="contact.html">Contact</a>
<ul>
<li><a href="contact.html#tarieven">Tarieven</a></li>
<li><a href="contact.html#offerte">Offerte</a></li>
</ul>
</li>
</ul>
</div>
CSS, included in bold is my hack for the space, so if this code is run, you do not see it:
#menu {
position: relative;
width: 100%; /*IE6*/
z-index: 1000;
background: #4f4979 url(img/menubalk.gif) 0 0;
border-bottom: 1px solid #000;
}
#menu ul {
width: 50.5em; /*smallest browser width*/
margin: 0 auto;
min-height: 2em;
list-style: none;
}
#menu li {
position: relative;
float: left;
width: auto;
border-left: 1px solid #fff;
}
#menu li.huidig {
background-color: #160c4a;
}
#menu li.pijl {
background: url(img/menupijl.gif) 94% 15px no-repeat;
}
#menu li.pijl:hover {
background-position: 94% -18px;
}
[b]
/*whitespace bug of submenu?... cause unknown*/
* html #menu li.pijl {margin-bottom: -5px;}
*+html #menu li.pijl {margin-bottom: -4px;} [/b]
#menu li.laatst {
border-right: 1px solid #fff;
}
#menu a {
display: block;
padding: 0 1em;
color: #fff;
font: bold 1em/2em optima, "gill sans", "trebuchet ms", helvetica, sans-serif;
text-decoration: none;
text-align: center;
}
#menu li.eerst a {
padding: 0 1.5em; /*"home" not wide enough for submenus*/
}
#menu ul ul {
position: absolute;
left: 0;
top: 2em;
width: 100%; /*width of parent li's, limits width*/
background: transparent url(img/menubg.png);
border: 1px solid #000;
}
/*Ie6 moet een explicit breede hebben*/
* html #menu ul ul {width: 8em;}
* html #menu ul li.eerst ul, * html #menu ul li.laatst ul {width: 7em;}
#menu ul ul li {
float: none;
width: 100%;/*IE6*/
border: 0;
}
#menu ul ul a, #menu li.eerst ul a {
width: 100%; /*IE6*/
padding: 0;
font-size: .8em;
line-height: 3em;
font-weight: bold;
text-align: center; /*IE*/
background: transparent url(img/menubg.png);
}
#menu ul ul ul {
left: 6.3em;
top: .5em;
}
* html #menu ul ul ul {left: 7.4em;}
#menu ul ul ul a {
line-height: 2.5em;
}
#menu ul ul, #menu ul li:hover ul ul {
margin-left: -9999px;
}
/*IE7 trigger, may not need it here*/
#menu li:hover {
visibility: visible;
}
#menu>ul>li a:focus, #menu :hover>a {
background-color: #160c4a;
}
#menu ul ul a:focus, #menu ul ul a:hover, #menu li.eerst>ul a:hover {
color: #000;
background: transparent url(img/menubg2.png);
outline: 0;
}
* html #menu ul ul a:hover {
color: #fff;
background-color: #160c4a;
background-image: none;
}
#menu a:focus+ul, #menu li:hover>ul, #menu ul ul ul {
margin-left: -1px;
}
* html #menu li:hover ul, * html #menu ul ul li:hover ul {margin-left: auto;} /*csshover.htc*/
#menu ul ul li:hover>ul {
margin-left: 0px;
}
#menu ul ul a:focus {
margin-left: 9999px;
color: #000;
background: transparent url(img/menubg2.png);
border: 1px solid #000;
outline: 0;
}
#menu ul ul a:focus:hover {
margin-left: 0; /*ff doubles margins*/
}
* html #menu ul ul a:active:hover {
margin-left: auto; /*also IE6*/
}
I’ve been looking and it seems I have haslayout, it seems it’s not whitespace, it seems not to be caused by something like font-size or line-height. I do wonder if em’s are playing a part here. This is both IE6 and IE7 doing this. IE8 and all modern browsers I’ve tested are ok.
Images!
Modern browser, in this case FF:
FF:
IE7 (with boxes highlighted using IE developer tool):
IE zoomed shot
What am I missing??
