Menu
I have a CSS style using child selectors in an HTML page as follows:
<html>
<head>
<title>MSO Bug</title>
<style type="text/css" media="screen,print">
ol{list-style-type:decimal;}
ol > ol {list-style-type:lower-alpha;}
ol > ol >ol {list-style-type:lower-roman;}
</style>
</head>
<body>
<div>
<ol>
<li><div>level1</div></li>
<ol>
<li><div>level2</div></li>
<ol>
<li><div>level3</div></li>
</ol>
</ol>
</ol>
</div>
</body>
</html>
In Firefox, the CSS works properly - the first list level starts with '1', the second with 'a', and the third with 'i' as expected.
But this doesn't work in IE7/8!
(I'm aware of descendent selectors - for some reason I can't use that here)
822
You need to specify a DOCTYPE for child descendants to work in IE7 / 8.
HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">>
HTML 4.01 Frameset:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Without the DOCTYPE, IE reverts to quirks mode and will only support descendant selectors, not child selectors.
119
Always set list-style and list-style-type properties to the ul (not the li).
ol { list-style-type: decimal; }
ol > li > ol { list-style-type: lower-alpha; }
ol > li > ol > li > ol { list-style-type: lower-roman; }
Update: Now that you’ve added the HTML to your question, it looks like a couple of things are wrong:
<!doctype html> above the first line of your code.Your HTML for your main OL is invalid. You’re closing the LI elements too early. An OL element can’t have another OL as a direct child element. This is what it should look like:
<ol>
<li>
<div>level1</div>
<ol>
<li>
<div>level2</div>
<ol>
<li>
<div>level3</div>
</li>
</ol>
</li>
</ol>
</ol>
</li>
</ol>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
