Currently, I have successfully included my form within <ul><li> tags, functioning well with label and form elements.
The CSS code for the form is straightforward and requires no explanation:
#form ul {....}
#form ul li {....}
Now, my dilemma is that instead of rendering a form element, I intend to create a tree structure using <ul><li>
<li>
<label>Parent Category</label>
<div>
// ... tree rendering here
</div>
</li>
However, my current CSS styling #form ul li {....} will impact the <ul><li> tags used for the tree as well.
Although using #form ul>li {....} to exclusively style direct children solves this, it fails to work in IE6.
An option is to use #tree ul li {} to override the unwanted styling from #form ul>li {}. Yet, this approach may also affect other areas where the cancellation of #form ul li {} styles is unnecessary.
Are there any alternative solutions that I can implement to keep #form ul li and #tree ul li styles independent of each other?
I hope my inquiry is apparent.
Thank you