RIRedinPA Posted January 27, 2010 Share Posted January 27, 2010 I'm trying to build a nav section where the sublinks are a unordered list and whenever I try to style the list to have no bullets it collapses the list on top of itself or rather stacks them so I only see one link... I'm pretty sure it is something I am doing style wise to probably the anchor tag or something else there rather than the ul but I can't find it...appreciate anyone taking a look... broken site is here...http://www.knowink.net/mao/index.php php/html code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Mid Atlantic Outside</title> <link rel="stylesheet" type="text/css" href="css/mao.css"> </head> <body> <div id="mainbox"> <div id="leftnav"><a href="index.php"></a><img src="images/mao_logo.png" border="0" class="logo"></a><p> <div id="leftnav_links"> <ul> <li><a href="javascript:void(0);" onmousedown="loadsection('snow');" class="navlink"><H1>Snow</H1></a></li> <li><a href="javascript:void(0);" onmousedown="loadsection('trail');" class="navlink"><H1>Trail</H1></a></li> <li><a href="javascript:void(0);" onmousedown="loadsection('bike');" class="navlink"><H1>Bike</H1></a></li> <li><a href="javascript:void(0);" onmousedown="loadsection('camp');" class="navlink"><H1>Camp</H1></a></li> <li><a href="javascript:void(0);" onmousedown="loadsection('water');" class="navlink"><H1>Water</H1></a></li> <li><a href="javascript:void(0);" onmousedown="loadsection('climb');" class="navlink"><H1>Climb</H1></a></li> <li><a href="javascript:void(0);" onmousedown="loadsection('advocacy');" class="navlink"><H1>Advocacy</H1></a></li> </ul> </div> </div> <div id="content">This is the content</div> </div> </body> </html> css code * { border: 0; margin: 0; padding: 0; } html { background-color: #333; font: normal 200 .85em "Trebuchet MS", Helvetica, sans-serif; } #mainbox { position: absolute; top: 20px; left: 20px; width: 100%; height: 100%; background-color: #fff; } #leftnav { float: left; top: 0px; left: 0px; width: 150px; height: 100%; background-color: #D99606; background-image: url(../images/bg_leftnav.png); background-repeat: repeat-x; } #leftnav img.logo { position: absolute; top: 55px; left: 18px; } #leftnav_links a.navlink { position: absolute; width: 146px; height: 20px; text-decoration: none; background-color: #A11010; text-align: right; padding-top: 2px; padding-right: 4px; } #leftnav_links H1 { font: normal 900 1.2em Arial, Helvetica, sans-serif; color: #fff; } #leftnav_links li { margin-bottom: 8px; list-style-type: disc; } #content { position: absolute; top: 0px; left: 150px; width: 828px; height: 100%; padding: 10px; } Quote Link to comment Share on other sites More sharing options...
RIRedinPA Posted January 27, 2010 Author Share Posted January 27, 2010 Just to add to this - if I do list-style-type: disc; it's fine, just when I plug "none" in there... Quote Link to comment Share on other sites More sharing options...
haku Posted January 27, 2010 Share Posted January 27, 2010 It's because you've given all your <a> tags absolute positioning. That takes them out of the flow, which means the <li> elements have no contents, and therefore no height. Why have you absolutely positioned your <a> tags? Quote Link to comment Share on other sites More sharing options...
RIRedinPA Posted January 27, 2010 Author Share Posted January 27, 2010 Yep, that was it. I'm going to go with being up since 5:30AM as my excuse for this one... :'(...thanks for the assist... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.