CSS Styling Large List of Links

I'm having a difficult time trying to use lists to horizontally style a large list of links. I can't seem to get proper spacing vertically. All the link boxes seem to overlap a bit. Somehow I just feel I'm going about this all the wrong way.

Here's the sample code:

Doctype = HTML 4.01 Transitional

css

ul#newlist { margin-left: 0px; padding-left: 0; }#active a:link, #active a:visited, #active a:hover {
color: #fff;
background-color: #369;
text-decoration: none;
}
#newlist a { padding: 3px 10px; white-space: nowrap; }
#newlist a:link, #newlist a:visited {
color: #fff;
background-color: #036;
text-decoration: none;
}
#newlist a:hover {
color: #fff;
background-color: #369;
text-decoration: none;
}#newlist li { display: inline; list-style-type: none; }

html

<div id="newlistcontainer">
<ul id="newlist">
<li id="active"><a href="#">Red Steel &amp; Plastic Widgets</a></li>
<li><a href="#">Blue Round Steel Widgets</a></li>
<li><a href="#">Square Yellow Widgets</a></li>
<li><a href="#">Bags Paper Shopping Bags</a></li>
<li><a href="#">Red Plastic Widgets</a></li>
<li><a href="#">Widgets in Red Plastic</a></li>
<li><a href="#">Plastic Blue Widgets</a></li>
<li><a href="#">Steel Widget Closeouts</a></li>
<li><a href="#">Widgets Blue &amp; Plastic</a></li>
<li><a href="#">Blue Yellow - Red Widgets</a></li>
<li><a href="#">Widgets Factory Direct</a></li>
<li><a href="#">Plastic Widgets</a></li>
<li><a href="#">Red &amp; Steel Widgets</a></li>
<li><a href="#">Steel &amp; Yellow Widgets</a></li>
</ul>
</div>

TIA for any help

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> #newlist { width:360px; [blue] /* you can try widths of 540px, 720px, 900px, 1080px or 1260px */[/blue] margin:0 auto; padding:0; list-style-type:none; font-family:verdana,arial,helvetica,sans-serif; font-size:12px; } #newlist li { float:left; width:180px; } #newlist #active a,#newlist #active a:visited,#newlist #active a:hover { color:#fff; background-color:#369; text-decoration:none; } #newlist a { display:block; line-height:22px; text-align:center; } #newlist a,#newlist a:visited { color:#fff; background-color:#036; text-decoration:none; } #newlist a:hover { background-color:#369; } </style> </head> <body> <ul id="newlist"> <li id="active"><a href="#">Red Steel & Plastic Widgets</a></li> <li><a href="#">Blue Round Steel Widgets</a></li> <li><a href="#">Square Yellow Widgets</a></li> <li><a href="#">Bags Paper Shopping Bags</a></li> <li><a href="#">Red Plastic Widgets</a></li> <li><a href="#">Widgets in Red Plastic</a></li> <li><a href="#">Plastic Blue Widgets</a></li> <li><a href="#">Steel Widget Closeouts</a></li> <li><a href="#">Widgets Blue & Plastic</a></li> <li><a href="#">Blue Yellow - Red Widgets</a></li> <li><a href="#">Widgets Factory Direct</a></li> <li><a href="#">Plastic Widgets</a></li> <li><a href="#">Red & Steel Widgets</a></li> <li><a href="#">Steel & Yellow Widgets</a></li> </ul> </body> </html>

CSS Styling Large List of Links

looks horrible

techstyled

birdbrain

techstyled

swa66

techstyled

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week