views:

322

answers:

3

In my website, I've got an ol with decimals (list-style-type:decimal). In Internet Explorer, when the list gets over 9 the decibel starts at 0 again.

This is how it should be displayed, and how it's displayed in Firefox: OL in Firefox
This is how Internet Explorer 7 and 6 displays it (IE8 not tested yet):
OL in Internet Explorer
So the list starts at zero again.

CSS of the list:

ol {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
}
ol li {
    list-style-position:outside;
    list-style-type:decimal;
    margin:5px 0 5px 23px;
}

edit: And my css reset file adds this (this comes from firebug):

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent none repeat scroll 0 0;
    border:0 none;
    font-size:100%;
    margin:0;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:0;
    padding:0;
    vertical-align:baseline;
}

Who knows how to fix this?

+2  A: 

The numbers are cut off by the margin. Increase it, and you'll see the tens-place digits.

ol li {
    margin-left: 2.5em;
}
outis
A: 

It's because of the margin:0; in your css reset file.

Jerome
The `margin:5px 0 5px 23px` in `ol li` should overwrite that.
Robin
It *should*, but we're talking about IE here ;) Remove it, and you'll see it works.
Jerome
I got it: it is not enough because of the margin of 'ol'.
Jerome
It should, and it does overwrite it.
Robin
A: 

A specific answer for users in the future who have this problem: the left margin has to be at least 30px to display double digits in IE.

Robin