Nested List CSS Issue

Hey Everyone,

I’m wondering if anyone can point me in the right direction for a little CSS issue I’m having. It may be something simple that I’m overlooking in my coffee induced morning haze. LOL

Anyway, the problem that I’m having is that I have a unordered list and one of those items has a nested list:


<ul>
  <li>Item 1</li>
  <li>Item 2</li>
    <ul>
      <li>Item 1</li>
      <li>Item2</li>
    </ul>
  <li>Item 3</li>
</ul>

in my CSS I have defined that all li items have a bottom border

ul li {
border-bottom-width: thin;
border-bottom-style: dotted;
border-bottom-color: #5c8727;
}

All my styles are working as I want them with the exception of my nested list. It’s pushing it’s containing li’s border down below the nested list. I’ve tried to get around this but haven’t been successful as yet.

Does anyone have any suggestions?

You are probably in quirks mode because no DTD is provided right at the top of you page.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en"><head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Nested li test</title>

  <style type="text/css">
  
    ul li {
      border-bottom-width: thin;
      border-bottom-style: dotted;
      border-bottom-color: #5c8727;
    }

  </style>

</head><body>

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
      <ul>
        <li>Item 1</li>
        <li>Item2</li>
      </ul>
    <li>Item 3</li>
  </ul>

</body></html>


Thanks for the reply,

I do have a doctype etc, I just posted the portion of the code previously that I thought was relevant to my question. Anyway, all of it appears as follows (and yes I AM a HTML5 user/supporter):

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>A List</title>
		<link href="css/style.css" rel="stylesheet" type="text/css">
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
               <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script type="text/javascript" src="js/custom.js"></script>
</script>
	</head>
<body>

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
      <ul>
        <li>Item 1</li>
        <li>Item2</li>
      </ul>
    <li>Item 3</li>
  </ul>

</body></html>

Don’t mind if you do. :slight_smile:

Anyway, I edited my post above and proposed a markup for you.

The problem may also occur in IE7-. If so, try this code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en"><head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Nested li</title>

  <style type="text/css">
  
    .some-list li, .sub-list span {
        border-bottom-width: thin;
        border-bottom-style: dotted;
        border-bottom-color: #5c8727;
      }

     .sub-list span {
        display:block;
      }
      
    .some-list .sub-list {
        border:none;
      }
      
  </style>

</head><body>

  <ul class="some-list">
    <li>Item 1</li>
    <li class="sub-list"><span>Item 2</span></li>
      <ul>
        <li>Item 1</li>
        <li>Item2</li>
      </ul>
    <li>Item 3</li>
  </ul>

</body></html>


I’ve marked the problem points in red.

The nested <ul> list goes inside the <li> before it. You should have

<li>Item 2
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>[COLOR="Green"]</li>[/COLOR]

And I would always put a border width of 1px rather than thin, because some/all (?) versions of IE count ‘thin’ as 2px, which probably isn’t what you want.

Nice catch, Stevie.

But your suggestions don’t solve the problems, the double bottom border persists.

Here’s my revised code, thanks to Stevie’s correction:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en"><head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Nested li</title>

  <style type="text/css">
  
    .some-list li, .sub-list span {
        border-bottom-width: thin;
        border-bottom-style: dotted;
        border-bottom-color: #5c8727;
      }

     .sub-list span {
        display:block;
      }
      
    .some-list .sub-list {
        border:none;
      }
      
  </style>

</head><body>

  <ul class="some-list">
    <li>Item 1</li>
    <li class="sub-list">
      <span>Item 2</span>
      <ul>
        <li>Item 1</li>
        <li>Item2</li>
      </ul>
    </li>
    <li>Item 3</li>
  </ul>

</body></html>


Well yes, because you’ve got two <li>s there, both ending at the same point with a bottom border.

How about adding

ul li li {border-top:1px; border-bottom:none;}

That would simulate the bottom border on the <li> that contains the sub-list, and removes the double bottom border at the end of the nested list. And no need to add lots of extraneous code, spans and classes.

The problem remains for IE7- and quirks mode, this time manifesting it self by a lack of “underline” for a couple of li.

Try this in quirks or IE7- and see what I mean:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en"><head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Nested li</title>

  <style type="text/css">
  
    ul li {
        border-bottom-width: thin;
        border-bottom-style: dotted;
        border-bottom-color: #5c8727;
      }

    ul li li {border-top:1px; border-bottom:none;}
      
  </style>

</head><body>

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
      <ul>
        <li>Item 1</li>
        <li>Item2</li>
      </ul>
    <li>Item 3</li>
  </ul>

</body></html>

If this is not what you meant, feel free to modify it.

You still left the closing list in place Μitică :slight_smile:


 <li>Item 2[B]</li>[/B]       <ul>

I’d probably do something like this depending on situation.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nested li</title>
<style type="text/css">
li {border-bottom:1px solid #5c8727}
li ul {
    border-top:1px solid #5c8727;
    margin-bottom:-1px;
}
</style>
</head>
<body>
<ul>
    <li>Item 1</li>
    <li>Item 2
        <ul>
            <li>Item 1</li>
            <li>Item2</li>
        </ul>
    </li>
    <li>Item 3</li>
</ul>
</body>
</html>


A bad case of copy/paste. :blush:

In IE in quirks mode, the second main li: Item 2, is not underlined. The rest of the line is underlined, except the text Item 2.