Re: [css-d] ul li unordered lists list level indent control II

[Barrett]

On Jul 6, 2008, at 5:25 PM, Jens Nedal wrote:

> Barrett wrote:
>> What do you think about controlling a <ul> list levels as seen by the
>> enduser in browser with css padding ?
>> I just contemplated this while wrangling with some server side code
>> SNIP
>>
>> .firstlevel {padding-left: 1em;}
>> .secondlevel {padding-left: 2em;}
>> Like this:
>>
>> <ul>
>>      <li class="firstlevel">Parent One</li>
>>      <li class="secondlevel"></li>
>>      SNIP
>>      <li class="secondlevel"></li>
>>      <li class="firstlevel">Parent Two</li>
>>      <li class="secondlevel"></li>
>>      SNIP
>>      <li class="secondlevel"></li>
>> </ul>
>>
>>
> When for example a Screenreader tries reading that list, the  
> information
> about levels is lost, in contrary to actually nesting the ul elements.
> Semantically all you have is list with one level, nothing else.
>
> In terms of have a structure that already conveys meaning without
> styling i would regard this as bad practice.
************************************************************************ 
****************
Here is a revision to this since I have been successful at server  
side getting the dynamic template built to build the list properly  
now afaik.
This link will land you drilled down in the list. This list of the  
day is in orange border div.
CSS W3C valid except mozilla border radius http://tinyurl.com/6lbmqs
http://beta.handmade-paper.us/page/CPO/CTGY/testcat2.2
W3C valid http://tinyurl.com/678lua

Would like input on best practices here for indent control the the  
list that I have found now is complicated by my "active category"
BLACK RIGHT-POINTING POINTER (present in WGL4)  &#9658;
I've experimented with some negative margins on this.

     ►Bottom1 Sub
       Bottom2 Sub
These seem to have a remaining tiny alignment issue.

Is there a better way to deal with multi level lists ?

Thanks,
Barrett
AOL/AIM handmadepaperus

Side note:
My &#9658; is not displaying in IE6, but does display on test page in  
IE6.
Test Page: http://www.alanwood.net/unicode/geometric_shapes.html
If it display on test page in IE6, then why not on my beta page ???

Relevant CSS -

#cattree {
        margin-left: 0;
        padding-left: 0;
        font-size: .8em;
        float: left;
        border: 3px solid orange;
        line-height: 1.2em;
        padding-right: 2px;
        margin-right: 3px;
}

#cattree ul {
        padding-left: 0;
        list-style-type: none;
        margin-left: 1em;
}

#cattree ul li ul {
        margin-left: 1em;
        padding-left: 0;
}

#cattree ul li ul li ul li ul li {
        padding-left: 0;
        margin-left: 0;
}

#cattree ul li ul li ul li ul #current_cat {
        padding-left: 0;
        margin-left: -1em;
}

#cattree ul li ul li ul li ul {
        margin-left: 1em;
}

#cattree ul li ul li ul li {
        padding-left: 0;
}

#cattree ul li ul li ul #current_cat {
        padding-left: 0;
        margin-left: -1em;
}

#cattree ul li ul li {
        display: block;
        padding-right: 1em;
        padding-left: 1em;
}

#cattree ul li ul #current_cat {
        display: block;
        margin-left: -1em;
        padding-left: 1em;
}

#cattree ul li ul #current_cat ul {
        display: block;
        margin-left: -1em;
        padding-left: 2.75em;
}

#cattree ul #current_cat {
        margin-left: -1em;
}


#catwrapperul {
        margin-left: 0;
        padding-left: 0;
}


Thanks,
Barrett
AOL/AIM handmadepaperus
***************************************************************

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/