CSS for Nested Lists [Archive] - Dynamic Drive Forums

View Full Version : 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

<!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

#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:

<!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.