IE6 adds extra spacing with display: block

[daGUY]

I’ve got a multi-level unordered list that I’m using to create a navigation menu:

HTML:

Code:

• Menu Item 1
• Menu Item 2
• Menu Item 3
  • Menu Item 3.1
  • Menu Item 3.2
  • Menu Item 3.3 (wraps to 2nd line)
  • Menu Item 3.4
  • Menu Item 3.5
• Menu Item 4
• Menu Item 5
• Menu Item 6

CSS:

Code:

body {
font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
}
div#sidebar {
float: left;
padding: 88px 0 0;
width: 200px;
}
div#sidebar a {
color: #333;
padding: 0 0 0 16px;
}
div#sidebar a:hover {
color: #036;
}
div#sidebar ul {
border-right: 1px solid #f0f1f5;
margin: 0 0 0 26px;
padding: 0;
}
div#sidebar ul li {
list-style-type: none;
margin: 0;
padding: 0;
}
div#sidebar ul li a {
display: block;
margin: 0 0 12px;
}
div#sidebar ul li a.selected {
color: #036;
}
div#sidebar ul li ul {
border-right: none;
margin: 0 0 0 12px;
}
div#sidebar ul li ul li a {
color: #999;
}

The problem is Menu Item 3.3, which wraps to a second line. The padding that I specified for each <li> only applies to the first line (because <a> is an inline element), so the second line ends up losing the indent, falling back all the way to the left. I set "display: block" on the <a> to fix it, but for some reason that makes IE6 freak out and add crazy amounts of spacing between everything.

Download the code and look at it in Firefox – that’s exactly how I want it to display. I just need it to look the same way in IE. Any ideas?

[Jonz]

I think we should start locking posts after it’s been solved so they can’t be spammed… dam bots SERIOUSLY ANNOYING ME

[Author]

Posts