SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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?

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Quote Originally Posted by noonnope View Post
    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>

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Syrehn View Post
    (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>

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Syrehn View Post
    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.

  6. #6
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by noonnope View Post
    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.

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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>

  10. #10
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You still left the closing list in place Μitică
    Code:
     <li>Item 2</li>       <ul>
    A bad case of copy/paste.



    Quote Originally Posted by Paul O'B View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •