View Full Version : unwanted margin between two list-items

10-15-2004, 11:52 AM

I'm working on a website and I'm experiencing some problems with IE when I apply a list. The problem is that a one pixel line shows up between two list items. The html code couldn't be much simpler than:

<div id="menu">
<li>Item 1</li>
<li>Item 2</li>

I use the following CSS code, which is also quite straightforward:

#menu {
float: left;
width: 200px;

#menu ul {
padding: 0px;
margin: 0px;
width: 200px;
list-style: none;

#menu li {
padding: 0px;
margin: 0px;
font-family: arial, helvetica, verdana;
font-size: 12px;
font-weight: bold;
height: 28px;
background: url(./graphics/menu-item.gif);

As you can see in the attached screenshot, an extra one pixel wide line exists between two menu items (at least in IE that is). I Moz everything works just as I want it. Anyone knwo what's wrong, and how to fix it?

Thanx, Michiel

10-15-2004, 12:42 PM
This is a known bug in IE; problem is, I forgot what the solution was... :o

Try to delete the line break between the two list items in the source, effectively coding both list items on one line; delete everything between the closing bracket of the first and the starting bracket of the second. See if that helps.

No, that wasn't it. AARGH! Stupid browser!

Update 2:

Okay, this is really only interesting if there's another element (like a link) inside the list items, but the idea is to set the list items to "display: inline;" and the links inside them to "display: block;".
I tried both a set width and none and saw no difference, but setting an explicit width might be something that's needed in other situations.
Happy experimenting! :D