By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Nested Lists blank line "Bug"

The Solution to the Top-Space problem with Nested Lists.

Edited: 2011-03-18 04:13

When working with nested lists, there is a "bug" where the nested list gets rendered on the second line, or about 1em from the last list item. This happens because the display type of li elements is list-item rather then block.

Setting the display value to block for list items, will solve this problem. But it will also mess up the numbering of the list. The solution is to apply a class, to each li element which is the parent of a nested list.

This was originally mentioned as a bug, but is in fact normal. The real problem, is that we don't have a parent selector in CSS, because this forces us to either use JavaScript, or throw in a class on each list item, which is a parent of a list.

Useful situations

Nested lists can be useful when you want to have a contents list, with links to each subsection on a page.

Styling nested lists

Below is an example, where each list item, who is a parent of another ordered list, will have its display set to block, rather then the default list-item.

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>Styling nested lists</title>

    <style type="text/css">
	* {margin:0;padding:0;}
	#Basement {
	 margin:auto;
	 width: 500px;
	}
  ol {
    list-style-type: decimal;
	margin: 0 0 0 1em;
  }
  .p {display:block}


    </style>
  </head>

  <body>
   <div id="Basement">
    <ol>
	 <li><a href="#section1">First level section item</a></li>
	 <li class="p">
	  <ol>
	   <li><a href="#section2">Second level section</a></li>
	   <li class="p">
	    <ol>
		 <li><a href="#section3">Third level item</a></li>
		 <li><a href="#section3">Third level item</a></li>
		</ol>
	   </li>
	   <li><a href="#section4">Second level item</a></li>
	   <li><a href="#section4">Second level item</a></li>
	  </ol>
	 </li>
	</ol>
   </div>

  </body>

</html>

Brugbart Vision!

The above class will also ignore the parenting lists, so we don't end up with missing numbers.