|
|
Posted by Froefel on 06/19/07 12:00
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
Navigation:
[Reply to this message]
|