Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

IE6/7 adding vertical indent to horizontal <ul> menu

IE adds ~5px vertical spacing to horizontal menu

2:27 pm on Feb 11, 2009 (gmt 0)

New User

10+ Year Member

joined:Feb 11, 2009
posts: 2
votes: 0

Greetings fellow web wizards. I'm building a theme for some web design software, and incorporating split navigation using an unordered list. As to be expected, the only browsers having difficulty displaying this correctly are IE6/7. Here's the relevant html code and css:


<div id="subMenu">
<ul><li><a href="../index.html" rel="self">Home</a></li><li><a href="page2.html" rel="self" id="current">Styled Text</a><ul><li><a href="../page2/page1/page1.html" rel="self">4-Tiered</a></li><li><a href="../page2/page3/page3.html" rel="self">Split Menus</a></li><li><a href="../page2/page15/page15.html" rel="self">Really Long Link Name</a></li></ul></li><li><a href="../page9/page9.html" rel="self">Blog</a></li><li><a href="../page10/page10.php" rel="self">Contact Form</a></li><li><a href="../page11/page11.html" rel="self">File Sharing</a></li><li><a href="../page12/page12.html" rel="self">Movie Album</a></li><li><a href="../page13/page13.html" rel="self">Photo Album</a></li></ul>

CSS (general stylesheet)

#subMenu ul {margin: 0;padding: 0;list-style: none;}
#subMenu ul li {display: list-item;}
#subMenu li a {display: none;}
#subMenu ul ul {margin: 0;padding: 0 5px;width:100%;list-style-type: none;}
#subMenu ul ul li {line-height: 40px;display:block;float: left;}
#subMenu ul ul a {display:inherit;float:left;padding:0 10px;color: #999;font-size: 1.2em;text-transform: uppercase;text-decoration: none;}
#subMenu ul ul a:hover{color: #e4e4e4;}
#subMenu ul ul #current{font-weight: bold;color: #fff;letter-spacing: 1px;}
#subMenu ul ul .currentAncestor {color: #fff;text-decoration: overline;}
#subMenu ul ul ul {display: none;}

CSS (conditional comments for IE 6/7)

#headerTransition {font-size: 1px;}
#subMenu ul ul {padding: 0;}
#subMenu ul ul li {padding-top:5px;display:block;line-height:20px;}
#subMenu ul ul a {display:block;font-size:12px;}

The problem is both IE 6/7 add a ~5px vertical indent to the menu items displayed in this submenu. For example, when "Styled Text" is the current page selected in the main menu, the submenu displays its child menu items fine. However, when the next main menu list item ("File Sharing") with children is selected, the submenu displays its menu items 5px lower. And this continues, so that the next main menu item with children is another 5px lower, etc. Obviously, I'd like the menu items in the submenu to be displayed without this 5px vertical indent.

Any thoughts/advice/pointers on how to address this would be greatly appreciated. Many thanks for your time. :)

2:37 pm on Feb 13, 2009 (gmt 0)

New User

10+ Year Member

joined:Feb 11, 2009
votes: 0

I'm still working on this, but without getting any closer to figuring out what the problem is. Any suggestions?