CSS-controlled list looks spaced-out in IE/Win

[chuckdesign]

Anybody know of a CSS hack to reduce the spacing in an unnumbered list and a paragraph in IE/Windows?

The list I'm referring to is on this page:

http://home.comcast.net/~cprovancher/sia/snec/upcoming.html

The CSS is at:

http://home.comcast.net/~cprovancher/sia/snec/sia-site.css

The left-hand menu looks great in Firefox and Safari, but IE/Win puts a lot of vertical spacing between each of the items in this list:

Events
• Upcoming Events
• Archived Events

I've tried commenting out the margins and padding with no luck; still can't tighten up that spacing in IE 6 for Windows. Any help will be appreciated. It's probably something easy that I'm overlooking.

Thanks,
Chuck

-- Chuckdesign

 

[BillyRayPreachersSon]

I'm really surprised that your page looks as good as it does, given that you are using IDs (which are supposed to be unique) in many places.

You should switch to using classes where you need to style multiple elements with the same rule.

I suggest you fix this, then run both your HTML and CSS through validators.

There's no point in trying to fix issues with buggy code.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

You also have a style block on the page with no "type" specified, and have redundant   characters after most menu items.

If the spaces are there to make more of the link clickable, there are far better ways to do this.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[chuckdesign]

Thanks, Dan, for the advice.

I converted the navigation DIVs to CLASSes, but I've lost my left-indent and now the red background layer is tiling where it shouldn't. I haven't been able to troubleshoot this yet. And I still have too much vertical spacing in IE/Win. I even deleted all the spaces between each of the <li> items, which I thought would do the trick. I must be doing something wrong.

You're right, I had used the redundant &nbsp; as a cheap way to get the links clickable, because that was the only way I could figure out how to make them clickable in IE/Win. If you have a better way, I'm all ears.

Not sure what you mean about the block with no "type" specified.

I'm not a fulltime CSS guy, so whenever I have to get back into it I feel lost.

-- Chuckdesign

 

[Vragabond]

http://www.alistapart.com/articles/taminglists/

Check the article for a good way to make a list of links where the whole button is clickable.