UL tree-view without the use of images

I've gotten quite far getting this to work already but I'm out of fresh ideas and need an elegant way to wrap it up.
I'm aiming to create a tree-view with those nice dotted lines but not using images. The solution seems quite simple, set a left and bottom border on all the li elements and use position relative to displace the name of the element, contained in a p-tag. The problem arises with containers. If the last-child of a list is an unfolded container, the dotted line runs on to the bottom of it's child-elements, where it should stop after the first line.
So, if anyone can come up with a gracefull solution to this, I'd be most appreciative. Here's the code I have so far:
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
      <title> Project </title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <style type="text/css">
      ul, li { list-style: none; margin: 0; padding: 0; }
      ul { padding-left: 1em; }
      li { padding-left: 1em; border: 1px dotted black; border-width: 0 0 1px 1px; }
      li.container { border-bottom: 0px; }
      li.empty { font-style: italic; color: silver; border-color: silver; }
      li p { margin: 0; background: white; position: relative; top: 0.5em; }
      li ul { border-top: 1px dotted black; margin-left: -1em; padding-left: 2em; }
      </style>
      
</head>

<body>
<ul>
      <li class="container"><p>Testing 1</p>
            <ul>
                  <li><p>Testing 1</p></li>
                  <li><p>Testing 2</p></li>
                  <li class="container"><p>Testing 3</p>
                        <ul>
                              <li><p>Testing 1</p></li>
                              <li><p>Testing 2</p></li>
                              <li><p>Testing 3</p></li>
                        </ul>
                  </li>
            </ul>
      </li>
      <li class="container"><p>Testing 2</p>
            <ul>
                  <li><p>Testing 1</p></li>
                  <li><p>Testing 2</p></li>
                  <li><p>Testing 3</p></li>
            </ul>
      </li>
      <li class="container"><p>Testing 3</p>
            <ul>
                  <li class="empty"><p>empty</p></li>
            </ul>
      </li>
</ul>
</body>
</html>

For a working online example: http://www.windgazer.nl/eexchange/list_test.html
LVL 17
mreuringAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

seanpowellCommented:
Interesting - just doing some testing here....
seanpowellCommented:
This is the direction I'm going in at the moment...


<html>
<head>
<html>
<head>
<title> Project </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
     ul, li { list-style: none; margin: 0; padding: 0; }
     ul { padding-left: 1em; }
     li { padding-left: 1em; border: 1px dotted black; border-width: 0 0 1px 1px; }
     li.container { border-bottom: 0px; }
     li.empty { font-style: italic; color: silver; border-color: silver; }
     li p { margin: 0; background: white; position: relative; top: 0.5em; }
     li ul { border-top: 1px dotted black; margin-left: -1em; padding-left: 2em; }
     ul.last { border-left:2px solid white; margin-left: -1.1em; padding-left: 2em; }
</style>
</head>
<body>
<ul>
     <li class="container"><p>Testing 1</p>
          <ul>
               <li><p>Testing 1</p></li>
               <li><p>Testing 2</p></li>
               <li class="container"><p>Testing 3</p>
                    <ul class="last">
                         <li><p>Testing 1</p></li>
                         <li><p>Testing 2</p></li>
                         <li><p>Testing 3</p></li>
                    </ul>
               </li>
          </ul>
     </li>
     <li class="container"><p>Testing 2</p>
          <ul>
               <li><p>Testing 1</p></li>
               <li><p>Testing 2</p></li>
               <li><p>Testing 3</p></li>
          </ul>
     </li>
     <li class="container"><p>Testing 3</p>
          <ul class="last">
               <li class="empty"><p>empty</p></li>
          </ul>
     </li>
</ul>
</body>
</html>
mreuringAuthor Commented:
Hmm, that works rather smooth, I was trying to get something along those lines to work but just got stuck, need an extra pair of eyes and all...
Personally I think that, IE be damned, if you can come up with a way to do this without a class but using CSS2 selectors that are beyond microsoft, I'd be more happy than using an extra class...

If this is the direction, I'm looking forward to your destination Sean :)

Nice going,

 Martin
Ensure Business Longevity with As-A-Service

Using the as-a-service approach for your business model allows you to grow your revenue stream with new practice areas, without forcing you to part ways with existing clients just because they don’t fit the mold of your new service offerings.

seanpowellCommented:
You just asked this question to frustrate me didn't you...
We can handle all the child elements, except the last one. I don't see how to remove it :-(

<html>
<head>
<html>
<head>
<title> Project </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul, li
{
    list-style: none;
    margin: 0;
    padding: 0;
}

ul
{
    padding-left: 1em;
}

li
{
    padding-left: 1em;
    border: 1px dotted black;
    border-width: 0 0 1px 1px;
}

li.container
{
    border-bottom: 0px;
}

li.empty
{
    font-style: italic;
    color: silver;
    border-color: silver;
}

li p
{
    margin: 0; background: white;
    position: relative;
    top: 0.5em;
}

li ul
{
    border-top: 1px dotted black;
    margin-left: -1em;
    padding-left: 2em;
}

p+ul
{
    border-left:2px solid white;
    margin-left: -1.05em;
    padding-left: 2em;
}

ul li ul
{
    border-left:1px solid white;
    margin-left: -1.05em;
    padding-left: 2em;
}

.last
{
    border-left: 2px solid white;
}

</style>
</head>
<body>
<div>
<ul>
    <li class="container"><p>Testing 1</p>
        <ul>
            <li><p>Testing 1</p></li>
            <li><p>Testing 2</p></li>
            <li class="container"><p>Testing 3</p>
                <ul>
                    <li><p>Testing 1</p></li>
                    <li><p>Testing 2</p></li>
                    <li><p>Testing 3</p></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="container"><p>Testing 2</p>
        <ul>
            <li><p>Testing 1</p></li>
            <li><p>Testing 2</p></li>
            <li><p>Testing 3</p></li>
        </ul>
    </li>
    <li class="container"><p>Testing 3</p>
        <ul class="last">
            <li class="empty"><p>empty</p></li>
        </ul>
    </li>
</ul>
</div>
</body>
</html>
mreuringAuthor Commented:
I honestly must admit that I didn't really expect anybody other than you to so much as give this a shot :) That is, except for me, but I'm on the questioneers side on this one... And hey, you gotta admit it's a nice challenge.
But, back to the solution, it doesn't seem to work? It looks the same in IE, mozilla and Opera and on all of them it's displaying a gap running from an open container to the next, it there is a next.
seanpowellCommented:
LOL - sorry, posted the wrong one.
Also - it's Moz only (using the p+ul)

Try this:
http://www.pdgmedia.com/ee/mreuring.html

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mreuringAuthor Commented:
Ok, I just had a quick look at it and that looks awesome (FYI Opera pick that up just nicely too). I'm going to check out what you did when I get home, but for now, a big thanx!!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.