The two lists under "Menu A" and "Menu B" display a small gap between them (using FF 1.5 on Mac OS), and it doesn't seem normal since all paddings and margins are set to 0.
Notably, in some styled lists there are no gaps between submenus at all, and it's been quite hard to identify why there's this difference.
<style>
ul {list-style: none; margin: 0; padding: 0; background: blue;}
li {float: left; border:
margin-right: 1em;
position: relative;
background: none;
padding: 3px 0; margin: 0;
text-align: center;
background: yellow;
width: 15%;
font: 12px helvetica;
}
ul ul li {width: auto; float: none;}
</style>
<body>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Link 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Link 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu A</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 5</a></li>
</ul></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu B</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 5</a></li>
</ul></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Link 5</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Link 6</a></li>
</ul>
</body>
There seem to be a lot of issues relating to css and lists, this is only one of them. Thanks for checking.No gap visible to me in IE6 or FF1.5 on WinXP.- no gap in Opera Version 8.02
- no gap in IE 5.5
- blue bars on the left of "item 1" in "Menu A" and "Menu B" in IE 5.01
System: Windows XPKudos bros. I'll check it through to see what else might be causing the problem.
Notably, in some styled lists there are no gaps between submenus at all, and it's been quite hard to identify why there's this difference.
<style>
ul {list-style: none; margin: 0; padding: 0; background: blue;}
li {float: left; border:
margin-right: 1em;
position: relative;
background: none;
padding: 3px 0; margin: 0;
text-align: center;
background: yellow;
width: 15%;
font: 12px helvetica;
}
ul ul li {width: auto; float: none;}
</style>
<body>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Link 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Link 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu A</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 5</a></li>
</ul></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu B</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">item 5</a></li>
</ul></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Link 5</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Link 6</a></li>
</ul>
</body>
There seem to be a lot of issues relating to css and lists, this is only one of them. Thanks for checking.No gap visible to me in IE6 or FF1.5 on WinXP.- no gap in Opera Version 8.02
- no gap in IE 5.5
- blue bars on the left of "item 1" in "Menu A" and "Menu B" in IE 5.01
System: Windows XPKudos bros. I'll check it through to see what else might be causing the problem.