I've been having some trouble with this (<!-- m --><a class="postlink" href="http://www.samingle.com/msdredo.htm">http://www.samingle.com/msdredo.htm</a><!-- m -->) page. the area that is causing difficulty it the left nav. I want to have the sub-ul's indent as they are now, but have the borders on them extend all the way across the 180px of the left nav. Any on ideas how I can do this? I could use text-indent, but that doesn't indent the text for multiple lines. Any ideas?
edit:
I've just looked at this page in IE for the first time, and I realize it is 4 px off on the left nav, but its IE, so I won't care for now (just eval this question from as if you'd only seen this page in a browser)I was able to fix it by adding spans and putting this chunk of code in. I'd prefer to lose the spans entirely, since they're semantically meaningless here, but if thats not possible, my next goal would be to lessen/clean up the css here:
#extraNav ul li ul li span{display:block;padding-left:10px;}
#extraNav ul li ul li ul li span{display:block;padding-left:20px;}
#extraNav ul li ul li ul li ul li span{display:block;padding-left:30px;}
#extraNav ul li ul li ul li ul li ul li span{display:block;padding-left:40px;}
I'm wondering if there's any way to simplify this down into 1 rule (with the 10px padding increase for each level of unordered lists.Use ul {margin: 0; } with li {padding: 10px; }. That's all you need to do, as it will build up because the inner lists are nested within li's.that was what I originally had, but it breaks the borders (the borders don't extend the entire width of the container, since they are nested within padded line itemsHeh, this would be so much easier if it weren't for those borders. I'm working on something, but I'll have to try again tomorrow... I gotta go right now.
EDIT: I just realized something that might work, however only the first and second tiers appear correctly, the third won't show as you like.
<style>
ul { padding: 0; margin: 0; list-style: none; background: blue; }
li {border-bottom: solid thin; padding: 0; }
li ul li { background: red; padding-left: 10px; }
li ul li ul {background: yellow; padding-left: 20px; left: 0; }
</style>
<ul>
<li>Lorem</li>
<li>Ipsum <ul>
<li>Lorem</li>
<li>Ipsum
<li>Ipsum <ul>
<li>Lorem</li>
<li>Ipsum</li>
</ul></li>
<li>Lipsum</li>
</ul></li>
<li>Lipsum</li>
</ul>
EDIT 2: I'm not sure if this is valid or not, but if you don't put the second tier lists within an li, it's simple:
<style>
ul { padding: 0; margin: 0; list-style: none; background: blue; }
ul li {border-bottom: solid thin; padding: 0; }
ul ul li { background: red; padding-left: 10px; }
ul ul ul li { background: yellow; padding-left: 20px;}
</style>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<ul>
<li>Lorem</li>
<li>Ipsum
<li>Ipsum</li>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
<li>Lipsum</li>
</ul>
<li>Lipsum</li>
</ul>that second would ruin it semantically. It really needs to support unlimited tears (as my current solution does). Its just quite cumbersome adding all those spans in there (this will eventually be serverside generated, but thats beside the point)Heh, well random spans aren't too semantic either, but it doesn't matter because the second solution is invalid XHTML... too bad, if it weren't so, this problem would be THAT much easier to solve.
edit:
I've just looked at this page in IE for the first time, and I realize it is 4 px off on the left nav, but its IE, so I won't care for now (just eval this question from as if you'd only seen this page in a browser)I was able to fix it by adding spans and putting this chunk of code in. I'd prefer to lose the spans entirely, since they're semantically meaningless here, but if thats not possible, my next goal would be to lessen/clean up the css here:
#extraNav ul li ul li span{display:block;padding-left:10px;}
#extraNav ul li ul li ul li span{display:block;padding-left:20px;}
#extraNav ul li ul li ul li ul li span{display:block;padding-left:30px;}
#extraNav ul li ul li ul li ul li ul li span{display:block;padding-left:40px;}
I'm wondering if there's any way to simplify this down into 1 rule (with the 10px padding increase for each level of unordered lists.Use ul {margin: 0; } with li {padding: 10px; }. That's all you need to do, as it will build up because the inner lists are nested within li's.that was what I originally had, but it breaks the borders (the borders don't extend the entire width of the container, since they are nested within padded line itemsHeh, this would be so much easier if it weren't for those borders. I'm working on something, but I'll have to try again tomorrow... I gotta go right now.
EDIT: I just realized something that might work, however only the first and second tiers appear correctly, the third won't show as you like.
<style>
ul { padding: 0; margin: 0; list-style: none; background: blue; }
li {border-bottom: solid thin; padding: 0; }
li ul li { background: red; padding-left: 10px; }
li ul li ul {background: yellow; padding-left: 20px; left: 0; }
</style>
<ul>
<li>Lorem</li>
<li>Ipsum <ul>
<li>Lorem</li>
<li>Ipsum
<li>Ipsum <ul>
<li>Lorem</li>
<li>Ipsum</li>
</ul></li>
<li>Lipsum</li>
</ul></li>
<li>Lipsum</li>
</ul>
EDIT 2: I'm not sure if this is valid or not, but if you don't put the second tier lists within an li, it's simple:
<style>
ul { padding: 0; margin: 0; list-style: none; background: blue; }
ul li {border-bottom: solid thin; padding: 0; }
ul ul li { background: red; padding-left: 10px; }
ul ul ul li { background: yellow; padding-left: 20px;}
</style>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<ul>
<li>Lorem</li>
<li>Ipsum
<li>Ipsum</li>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
<li>Lipsum</li>
</ul>
<li>Lipsum</li>
</ul>that second would ruin it semantically. It really needs to support unlimited tears (as my current solution does). Its just quite cumbersome adding all those spans in there (this will eventually be serverside generated, but thats beside the point)Heh, well random spans aren't too semantic either, but it doesn't matter because the second solution is invalid XHTML... too bad, if it weren't so, this problem would be THAT much easier to solve.