Need some help with a CSS style

[Froefel]

I'm trying to achieve the following result, related to vertical
spacing around text:

<OL class="level1">
<LI>
<OL class="level2">
<LI></LI>
</OL>
</LI>
</OL>

I need to get 1.5em of space after each LI within OL level1
I need to get 5px of space before each LI within OL level 2

I have written the following stylesheet to achieve this:
ol.level1 { list-style: decimal; margin-left: 2em; padding-left: 0; }
ol.level2 { list-style: disc; margin-left: 1.25em; padding-left: 0;
padding-top: 0; text-indent: 0; }
ol.level1>li { padding-bottom: 1.5em; }
ol.level2 li { padding-top: 5px; }

Problem is: this renders perfectly in FireFox 2.0.0.4, but in IE 6.0
it doesn't render the 1.5em vertical space

Replacing the third style with li.level1 { padding-bottom: 1.5em; }
and adding class="level1" to each <LI> within OL level1 achieves the
proper result in IE 6.0, but then FireFox doesn't render the desired
result.

Is there an elegant way to achieve the desired result in both
browsers, without the need for conditional styles?

Any help is greatly appreciated!

-- Hans De Schryver

 

[Andy Dingley]

Is there an elegant way to achieve the desired result in both
browsers, without the need for conditional styles?

I haven't looked at your example in detail, but AFAIR the default
stylesheets for lists are significiantly different between IE and FF.
One uses margin to achieve the indents, the other uses padding.

So if you want consistent results, and you change _anything_, then
always change _everything_.
That means approximately 16 CSS values: margin and padding on all four
edges of both elements.
(There might be some you can skip, but I can't remember the details to
that level).

 

[Jim Moe]

ol.level1>li { padding-bottom: 1.5em; }

ISTR that IE6 does not support the child combinator (>).