IE and strange UL-tag Phenomena

[aiden]

Howdy all. I'm currently working on a site with a vertical nav bar on the left hand column. In attempts to keep my markup compliant and clean, I'm using symantic markup so that the unstyled pages are still navigable.

Under these pretenses, I'm using a CSS-styled unordered list (UL tag) for the nav, each element styled with a bullet and :hover pseduoclasses to achieve the roll-overs and proper styling.

It looks great, works great... in every compliant browser (even IE5 mac!)... but it doesn't look so hot in IE6. It still works, but each element in the list has a HUGE top and bottom margin. It would seem that IE assumes you definitely want a certain amount of space around your list-items, and has a predetermined base top/bottom margin.

Like I said, it works, but it's ugly.

You can see the page here: http://www.gravitymusic.com/aiden/bookmark/

Any known workarounds for this strangeness?

--
Aiden

[tgreer]

Remove the line in red. You're trying to display an inline element in "block" mode, and that is causing IE to add the extra space.

Firefox, on the other hand, just ignores it.

#sidebar .sidebox a, 
#sidebar .sidebox span {
	border-bottom: 1px solid #fff;
	color: #5C5D60;
	display: block;    
	padding: 4px 2px;
	text-decoration: none;
}

[aiden]

That's not exactly true -- by removing the block element designation, you lose the full-width rollover (that is, only the text will respond to the hover, not an evenly wide selection for each list-item). You also lose the ability to display bullets as background images which is pretty much the only way I've found to get accurate vertical centering between image bullet and list item without breaking spec.

It's not at all that IE is ignoring it - they're both treating it properly as a block element. IE, more appropriately, breaks standard by not following implicit definitions of certain block elements margins (unordered lists apparently being a prime example).

There is a CSS workaround for this that I found at R2D's blog, but this results in a violation of W3C spec -- inline elements are not alowed to (technically) contain block elements, even if the browser will draw them (more properly) as such. And again, an inline element can't have a background image by spec, and some browsers (like Gekko) won't even display them if they're defined. So there go the bullets even if I do use the hack.

I guess the safe thing to do is ignore the fact that IE breaks spec for now (I mean, it's not like I'm surprised that Redmond screwed up. IE blows.) and wait for the issue to be resolved in IE7. It's better than introducing a non-spec workaround now and then having it break a later version of Microsofts terrible browser.

[tgreer]

The problem really is with the display: block, though. If you want to treat it as a block element, you really have to deal with it as a block element. That means setting explicit "position" and "height" properties.

This should fix the issue:

#sidebar .sidebox a, 
#sidebar .sidebox span {
	border-bottom: 1px solid #fff;
	color: #5C5D60;
	position: relative;
	height: 10px;
	display: block;
	padding: 4px 2px;
	text-decoration: none;
}

[tgreer]

I'm just re-reading through the threads, making sure all loose ends are wrapped, etc. I notice you never implemented the changes to fix IE.

Perhaps you never saw my latest reply? It will tidy everything up, I promise!