Nested list item styles (with empty container list items)

Question

I'm trying to make the following arrangement with lists:

1. a. TextA
   b. TextB
   c. TextC
2. Text2
   a. TextA

Ideally I wouldn't have to make a seperate class or markup for the first case. The problem is that currently it looks like this:

1.
   a. TextA
   b. TextB
   c. TextC
2. Text2
   a. TextA

HTML code:

<ol>
    <li>
        <ol>
            <li>TextA</li>
            <li>TextB</li>
            <li>TextC</li>
        </ol>
    </li>
    <li>Text2
        <ol>
            <li>TextA</li>
        </ol>
    </li>
</ol>

Is it possible to do this with CSS? We only have to target FF3 fortunately so I was hoping for some advanced CSS selectors. However it seems that to "detect" the first case you have to see if there is any text in the first list item before the ol tag and I don't think you can do that with CSS.

I also noted that sometimes people put the nested ol below the li tag instead of inside of it, but I couldn't find any difference in the appearance.

Thanks in advance.

EDIT: I didn't mention something that has turned out to be very important to this problem. I need the numbers to align to the right instead of left. I found a solution for this on another stackoverflow question, the css I'm using is:

li {
    margin-bottom: .5em;
    margin-left: 25px;
}

li:before {
    display: inline-block;
    content: counter(item) ".";
    counter-increment: item;
    width: 20px;
    margin-left: -23px;
}

The last 7 lines make the lists behave like I outlined above, sorry for the confusion!

Answer 1

When I copy and paste your html into a new doc, I get the desired result. I only see the sublist on a newline if there is a non-breaking space or similar after "1."

Answer 2

Ok, so playing with the example given. The problem magically goes away if you remove the last 7 lines from the styles.

You mention this line is important, but I'm not sure why. Removal doesn't seem to affect the spacing or numbering at all - except to make it work.

The following style code seems to give what you're in the original question - including "right align" - please correct me if I'm still wrong:

li {
  margin-bottom: .5em;
  margin-left: 25px;
}
ol ol li {list-style-type:lower-alpha;}