CSS for Nested Lists

**supersav144** · 09-29-2011, 06:47 AM

I am currently trying to create some nested lists to display the following...

A...R...X
B...S...Y
C...T...Z

(where the letters will eventually be replaced by words) and have made this work perfectly in chrome and firefox, however when I use Internet Explorer I get something resembling the following...

A
B...R
C...S...X
.....T...Y
..........Z

I assume it's probably to do with the css, but please can someone help me with this problem, the html and css are shown below, thanks in advance for any help.

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel=stylesheet href="links.css" type="text/css">
</head>
<body>

<div id="container">

	<ul id="links-nav">
		<li>
			<ul>
				<li><a href="#">A</a></li>
				<li><a href="#">B</a></li>
				<li><a href="#">C</a></li>
			</ul>
		</li>
		<li>
			<ul>
				<li><a href="#">R</a></li>
				<li><a href="#">S</a></li>
				<li><a href="#">T</a></li>
			</ul>
		</li>
		<li>
			<ul>
				<li><a href="#">X</a></li>
				<li><a href="#">Y</a></li>
				<li><a href="#">Z</a></li>
			</ul>		
		</li>
	</ul>

	<div class="clear"></div>	
</div>

</body>

</html>

CSS

Code:

#container{
	width:960px; 
	margin:0px auto; 
	border: 1px solid #000;
	padding:20px 10px; 
	height:auto; 
	font-family: Arial, sans-serif; 
	font-size:11px;
}

.clear {
	clear: both;
	height: 0;
	overflow: hidden;
}


a{
	text-decoration:none;
	color:#555;
}

#links-nav li, li ul li{
	list-style:none;
}

#links-nav{
	display:inline;	
	margin:0;
	padding:0;
}

#links-nav li ul{
	float:left;
	padding:0;
	width:168px;
	padding: 0px 10px;		
}

**FrankC** · 09-29-2011, 08:19 AM

Here you go:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#container{
	width:960px;
	margin:0px auto;
	border: 1px solid #000;
	padding:20px 10px;
	height:auto;
	font-family: Arial, sans-serif;
	font-size:11px;
    }
.clear {
	clear:both;
    }
a{
	text-decoration:none;
	color:#555;
    }
#links-nav li, li ul li{
	list-style:none;
    }
#links-nav li ul li {
	float:left;
	margin:10px;
	padding:0;
    }
#links-nav li ul{
	padding:0;
	width:168px;
	padding: 0px 10px;
    }
</style>
</head>
<body>
<div id="container">

	<ul id="links-nav">
		<li>
			<ul>
				<li><a href="#">A</a></li>
				<li><a href="#">B</a></li>
				<li><a href="#">C</a></li>
			</ul>
		</li>
		<li>
			<ul class="clear">
				<li><a href="#">R</a></li>
				<li><a href="#">S</a></li>
				<li><a href="#">T</a></li>
			</ul>
		</li>
		<li>
			<ul class="clear">
				<li><a href="#">X</a></li>
				<li><a href="#">Y</a></li>
				<li><a href="#">Z</a></li>
			</ul>
		</li>
	</ul>

	<div class="clear"></div>
</div>
</body>
</html>

**FrankC** · 09-30-2011, 03:57 PM

Last edited by jscheuer1; Yesterday at 11:10 AM. Reason: remove unnecessary self promotion link

The link was to a tutorial on how to position in CSS, that contained valuable information on the use and clearing of float, something the thread starter obviously has problems with. I wrote that tutorial myself, but claim it is one of the best, if not the best tutorial on CSS positioning - it covers all 7 methods. I therefore feel treated unfairly if you say that it was an unnecessary self promotion link.

Thread: CSS for Nested Lists

Thread Tools

Search Thread

CSS for Nested Lists

Bookmarks

Bookmarks

Posting Permissions