May 19
Gaps in menu list items in I.E.
2004 at 03.16 am posted by Veerle Pieters
Yesterday I was working on a horizontal navigation with vertical submenus in CSS using list items. This is normally not that difficult if you don’t have to deal with Internet Explorer. You just use the :hover pseudo class to let the submenus appear when you hover the main menu buttons. Since this is not supported by I.E. you have to find a smart way to get around this.
There is an article/tutorial on A List Apart that explains the whole issue and that learns you to create such a navigation step-by-step. This was also my starting point for my menu. My example uses graphical buttons for the horizontal main menu with rollovers (by JavaScript, I know I could have done this through CSS, but this time I chose not to).
When I was almost finished with this I had to deal with another I.E. problem. There seemed to be 4pixel gaps in between my submenu buttons. Sigh... :-(
After trying out some different things with no result, I came across this page. And using display: inline; in the ul li selector did the trick. The only thing that still bothers me is that I.E. doesn't give the mouse hover effect in the submenus when I'm not actually on the text. If anybody know what causes this, you're welcome to share ideas ;-) Or if there are even better resources on the I.E. gab or I.E. :hover issues, don't hesitate to comment.
Update! It seems that there was a gap between the main menu and the submenus in FireFox (both on Windows and Mac). I was able to fix this by removing this code:
li > ul {top: auto;left: auto;}
It seems that in my example this special code for I.E. wasn't needed after all. If I leave it out everything appears to be fine (in I.E. 6 Windows, FireFox Mac/Windows, Safari). Except when you remove this piece of code the submenus in Opera 7.5 (Windows) will act strangely. However when you put it back in Opera 7.5 works great, but then there is a gap between the main menu and the submenu in FireFox 0.8. I don't know how to fix this so it works in both.
13served
1
i can’t see a submenu in IE 6.0 (Win2k)
Firefox and Opera works fine.
Firefox shows a space between header and submenu, Opera doesn’t ... dunno where it comes from.
(IE 6.0, Firefox 0.8, Opera 7.50)
Soulcore
2
Soulcore, it did work before and I think I know what caused it not to work anymore. I added an “onload” action in the body tag after I checked, just to preload my rollover images. Once I remove this the menu works again… what’s the logic of that :-S
I’ll take a look to fix the gabs in FireFox. I didn’t check it in that browser.
3
Glad to see my page helped you get rid of the gaps. You can force IE to highlight when you mouse over anywhere on the block by giving it a height or width. Just change your css as follows:
ul#smenu1 li a, ul#smenu2 li a {
padding: 5px;
margin: 0px;
display: block;
border-bottom: 1px #fff solid;
color: #ffffff;
background-color: #C3C3BA;
text-decoration: none;
}
/* for IE */
* html ul#smenu1 li a, * html ul#smenu2 li a {
/* Hide from IE5-mac. */
height: 1%;
/* End IE5-Mac hack */
}
4
Ehm, good article, but it’s gaps, not gabs :o
5
To fix the :hover pseudo class so that it can by applied on objects other then the anchor in IE6 look at this site:
http://www.xs4all.nl/~peterned/csshover.html
6
Sometimes features that appear to be ‘missing’ in programming languages are actually deliberate restrictions in order to encourage good practice.
It seems fair to limit rollover to html elements that actually perform some operation (javascript/anchor). If you look at most good websites you won’t find rollovers all over the shop, and you very rarely find rollovers over any element that is not within a link. Therefore IE’s model is perfectly sensible.
Of course in CSS it’s perfectly valid to say a:hover img { ... } for example, so in practice IE can render mouseovers on any element.
7
Still if it wasn’t for I.E. my navigation wouldn’t need any javascripting. But I had to implement it specially for I.E. since I.E. doesn’t “understand” or “support” this code (:hover or.over) to make the submenus appear when you rollover the section buttons:
li:hover ul, li.over ul {display: block;
}
And I’m not talking about a:hover here, cause that’s not the same at all.
8
How about making it
a:hover li ul { display: block }
And you’d pop some anchors into your html.
(by the way, the semicolons are delimiters in CSS, you do not need them after every definition)
9
By the way, I think your site works really well and I love the layout. Did you write the CMS code yourself
10
@Chris Beach: no I didn’t write the CMS myself, I only customized it to fit my needs. I use pMachine Pro btw.
a:hover doesn’t work, I really need li:hover for this kind of technique. As far as I know there isn’t a solution (CSS based only) without javascript to make it work in I.E.
11
Right, yes, I think I understand the dillemma, as putting nested li’s inside a’s would probably invalidate the xhtml. I may look into this tecnique though. It would be wonderful to take the dependency on javascript out of the equation
12
I have just found out that Microsoft have implemented an altogether more sophisticated mechanism to allow behaviour like this.
They allow you to put ‘behaviours’ in a separate HTC file and then use the (MS) CSS behaviour property to link to a behaviour defined the HTC file
The CSS:
ul.menu li { behavior: url( menu.htc ) }
The HTC file:
<attach event="onmouseover" handler="rollOver" />
<attach event="onmouseout" handler="rollOff" />
<script type="text/javascript">
function rollOver() {
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == ‘UL’ ) {
element.childNodes[x].style.display = ‘block’; }
}
}
function rollOff() {
for( var x = 0; element.childNodes[x]; x++ ){
if( element.childNodes[x].tagName == ‘UL’ ) {
element.childNodes[x].style.display = ‘none’;
}
}
}
</script>
So, the CSS syntax is wonderful simple, and use of the HTC allows javascript behaviour to be propogated throughout the document without the designer having to change any html tags.
I will be glad when a powerful model like this becomes the defacto standard.
13
Hi Chris, yes I’ve heard about this technique and used it in a recent project. You can view this here if you like. Thanks for sharing this info with me.