Forums

daGUY

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

HTML:

<div id=\"sidebar\">
	<ul>
		<li><a href=\"#\">Menu Item 1</a></li>
		<li><a href=\"#\">Menu Item 2</a></li>
		<li><a href=\"#\" class=\"selected\">Menu Item 3</a>
			<ul>
				<li><a href=\"#\">Menu Item 3.1</a></li>
				<li><a href=\"#\">Menu Item 3.2</a></li>
				<li><a href=\"#\">Menu Item 3.3 (wraps to 2nd line)</a></li>
				<li><a href=\"#\">Menu Item 3.4</a></li>
				<li><a href=\"#\">Menu Item 3.5</a></li>
			</ul>
		</li>
		<li><a href=\"#\">Menu Item 4</a></li>
		<li><a href=\"#\">Menu Item 5</a></li>
		<li><a href=\"#\">Menu Item 6</a></li>
	</ul>
</div>

CSS:

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?

daGUY

Nevermind, I got it - for IE only, I had to specify "height: 0" on each <a>:

div#sidebar ul li a {
	display: block;
	height: 0;
	margin: 0 0 12px;
}

For some reason, setting "display: block" on the <a> causes IE to give it a default height of 42px (I inspected it with the developer toolbar).

I tell you, the amount of time I waste getting things to work in this browser... :evil: :lol:

Jonz

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

treehouse : what would you like to learn today?

Forums

IE6 adds extra spacing with display: block