ansaurus

Question

Answer 1

+3 A:

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:

You’re not declaring a doctype. Try adding <!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>

Mathias Bynens 2010-05-12 11:15:29

+1 to that Mathias. I fixed that basic error, and edited the post to include the complete page. Still doesn't work in IE7 (and continues to work in FF).

Raj 2010-05-12 11:21:03

@Raj: Thanks for posting your HTML! I edited my answer.

Mathias Bynens 2010-05-12 11:59:41

You're right. It's a combination of both the errors you've mentioned. Accepting your answer. Unfortunately, many RTF editors produce code such as the one I've given (e.g. the YUI editor).Need to find a workaround...Thanks nevertheless!

Raj 2010-05-12 12:24:39

lists used to be able to be nested directly, but it has been deprecated..

Gaby 2010-05-12 12:35:13

I'm confused that this answer works! Your CSS shouldn't work now, as the ol's are no longer directly related...

MatW 2010-05-12 12:43:37

MatW - this doesn't actually work! Please see my comment above. However the explanation given by Mathias is the correct one, hence I accepted his answer.

Raj 2010-05-12 16:43:34

Answer 2

+1 A:

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"&gt;

HTML 4.01 Transitional:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"&gt;&gt;

HTML 4.01 Frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"&gt;

Without the DOCTYPE, IE reverts to quirks mode and will only support descendant selectors, not child selectors.

MatW 2010-05-12 11:29:45

I tried all three above by adding them before the <html>. None of them caused the CSS to work. How do I know which mode IE is in?

Raj 2010-05-12 11:52:32

It should do; the error has nothing to do with putting <ol> in <li>... The above code is tested and works.

MatW 2010-05-12 12:28:47

@MatW: That is invalid HTML.

Mathias Bynens 2010-05-12 12:31:42

@Mathias Bynens. Sure, but the point is that the incorrect HTML isn't the problem, it's the lack of DOCTYPE. Incorrect HTML does confuse the issue though, so I'll rollback.

MatW 2010-05-12 12:34:51

@Raj You can use javascript to find out what mode IE is in; "alert(document.compatMode);". It will say "BackCompat" if you're in quirks mode (bad), "CSS1Compat" if you're not (good).

MatW 2010-05-12 12:55:46

Thanks MatW, that's useful info

Raj 2010-05-13 06:14:19

ansaurus

tags:

views:

answers:

Child selector problem in IE7, IE8

related questions