Overflown Ordered List Does Not Increment

Why does an ordered list not increment when the list item has hidden overflow? Here's a simplified example. My actual application needs hidden overflow because the list items have

Solution 1:

ol {
    margin: 0 0 1em 0;  
    counter-reset: item;
}

ol li {
    list-style: decimal inside none;
    background: pink;
    display:inline-block;
    border-bottom: 3px dotted #000;       
    margin-left: 1em;
}

ol li div {
    background: #999;
    width: 20em;
    height: 2em;
    margin: 0.2em;
}


li:before {
    display: inline-block;
    content: counter(item);
    counter-increment: item;    
    width: 2em;
    margin-left: -1em;
}

Check working example at http://jsfiddle.net/DCgq3/62/

Solution 2:

Uh-Oh was expecting the IE7 "burp" but not FF4 :(

IE7 is a haslayout problem, notoriously it cannot number lists (even has trouble putting a plain bullet sometimes)

why FF4 I don't know, will take a look