Jump to content

ul/li list-style-type none causes list to collapse

RIRedinPA

By RIRedinPA
in CSS Help

Recommended Posts

RIRedinPA Advanced Member

RIRedinPA

Posted
Posted

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;
}

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.