Need some help with a CSS style

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

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

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

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, 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

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

Re: Need some help with a CSS style

Quoted text here. Click to load it

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).

Re: Need some help with a CSS style

Froefel wrote:
Quoted text here. Click to load it
  ISTR that IE6 does not support the child combinator (>).

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Site Timeline