Need some help with a CSS style

Need some help with a CSS style

am 19.06.2007 14:00:19 von Froefel

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









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

    • Re: Need some help with a CSS style

    am 19.06.2007 15:59:50 von Andy Dingley

    On 19 Jun, 13:00, Froefel wrote:

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

    Re: Need some help with a CSS style

    am 19.06.2007 19:17:28 von jmm-list-gn

    Froefel wrote:
    >
    > ol.level1>li { padding-bottom: 1.5em; }
    >
    ISTR that IE6 does not support the child combinator (>).

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