Nested List CSS Issue

**Syrehn** · Apr 1, 2011 10:10

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:

Code HTML4Strict:

<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

Code CSS:

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?

**noonnope** · Apr 1, 2011 10:19

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

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

**Syrehn** · Apr 1, 2011 10:28

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

Code:

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

Originally Posted by noonnope

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

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

**noonnope** · Apr 1, 2011 10:33

Originally Posted by Syrehn

(and yes I AM a HTML5 user/supporter)

Don't mind if you do.

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

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

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>

**Stevie D** · Apr 2, 2011 11:55

Originally Posted by Syrehn

Code:

<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

Code:

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

I've marked the problem points in red.

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

Code:

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

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.

**noonnope** · Apr 2, 2011 12:00

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:

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>
      <ul>
        <li>Item 1</li>
        <li>Item2</li>
      </ul>
    </li>
    <li>Item 3</li>
  </ul>

</body></html>

**Stevie D** · Apr 3, 2011 02:05

Originally Posted by noonnope

Nice catch, Stevie.

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

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

How about adding

Code:

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.

**noonnope** · Apr 3, 2011 02:59

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:

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

**Paul O'B** · Apr 3, 2011 05:33

You still left the closing list in place Μitică

Code:

 <li>Item 2</li>       <ul>

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

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

**noonnope** · Apr 3, 2011 23:24

Originally Posted by Paul O'B

You still left the closing list in place Μitică

Code:

 <li>Item 2</li>       <ul>

A bad case of copy/paste.

Originally Posted by Paul O'B

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

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.

User Tag List

Thread: Nested List CSS Issue

Thread Tools

Display

Nested List CSS Issue

Bookmarks

Bookmarks

Posting Permissions