Nested Lists Bug
Posted The: 12/06/2009 At: 18:55
Contents:
Most Web Designers who have worked with Nested Lists in HTML, would have encountered the Nested Lists Bug at some point, aka Nested lists space before problem.
There is a problem where having lists inside lists, would push down the nested list about one lines height (usually 1em).
Nested List Fixes
There are a number of known fixes to this problem, Brugbart recommends using the CSS Based Solutions.
Using the CSS Display Property
Note. This is likely the best method, because it is the simplest solution.
The First Example only uses the CSS Display Property, to archive the effect.
The left-margin is then applied on the li elements themself, rather then the parant ol. Because we changed the display of the ol to inline, it will also behave as an inline element, but the li's are still blocks. So to get around this, we simply apply the margin on the li's instead, this is to make sure all the li elements gets the style applied, and not just the ol, or the first li with the appearance of getting pushed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Nested List Bug Solution 1</title>
<style type="text/css">
ol, ul {
margin: 0; padding: 0;
}
ul ol {
display: inline;
}
ul ol li {
list-style-type: decimal;
margin-left: 2.5em;
}
</style>
</head>
<body>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>
<ol>
<li>Sub Item</li>
<li>Sub Item</li>
<li>Sub Item</li>
</ol>
</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<p>The First Example only uses the CSS <a href="http://brugbart.com/References/CSS-Display-
Property_154.html">Display Property</a>, to archive the same effect.</p>
<p>The left-margin is then applied on the li elements themself, because we changed the display of
the ol to inline. This is to make sure all the li elements gets the style applied, and not just the
ol, with the appearance of the first li getting pushed.</p>
</body>
</html>
Problems with the Numbering
There is a problem, where using display:inline; messes up the numbering of the list, this is solved by setting the list-style-type on the li elements, rather then relying on the browser default, or setting it on the ul or ol.
Using Float and Clear
The second fix also uses plain CSS, specifically Float, combined with clever use of Clear, to get around the bug with nested lists.
The nested list must have float: left; applied, and the containing element, I.e. The list item containing the nested list, should have clear: left; applied.
Any elements coming after the list, should also have clear: left; applied. Below is an example.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Nested List Bug Solution 2</title>
<style type="text/css">
ul {
padding: 0 0 0 1em;
margin: 0;
list-style-type: none;
}
ul li, ol li, ul + *, ol + * {
clear: left; /* Resets the Nested List Fix */
}
ul ol, ol ul {
padding: 0 0 0 2em;
margin: 0;
float: left; /* Nested List Fix */
}
</style>
</head>
<body>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>
<ol>
<li>Sub Item</li>
<li>Sub Item</li>
<li>Sub Item</li>
</ol>
</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</body>
</html>
Comments: [0]
