Question

I have an ordered list:

<ol> <li>They used to bring concerns about their children or their marriages. But increasingly parishioners are also telling Glen VanderKloot, a Lutheran minister in Springfield, Ill., about their financial worries, and that puts him in the unusual position of dispensing investment advice.</li> <li>This is the Second g</li> <li>This is the Third g</li> <li>This is the fourth g</li> <li> <strong>This is the fifth g</strong> </li> <li>This is the seventh g</li> <li>This is the eight g</li> <li>This is the ninth g</li> <li>This is the tenth g</li> <li>This is the eleventh g</li> <li>This is the twelvth g</li> </ol> 

It appears as follows:

1.  They used to bring concerns about their children or their marriages. But     increasingly parishioners are also telling Glen VanderKloot, a Lutheran     minister in Springfield, Ill., about their financial worries, and that puts     him in the unusual position of dispensing investment advice. 2.  This is the Second g 3.  This is the Third g 4.  This is the fourth g 5.  This is the fifth g 6.  This is the seventh g 7.  This is the eight g 8.  This is the ninth g 9.  This is the tenth g 10. This is the eleventh g 11. This is the twelvth g 

When I have a lot of text like the first item, I want it to be formatted like above. I was able to accomplish this by setting:

list-style-position:outside; 

and adjusting some margins on the li and ol tags. However, this had some adverse effects when I had double and triple digits. I had to use these margins as in IE the numbers were being cut off. I would like to be able to go back to use a list-style-position of inside and remove the margins but the text wraps under the number which is not what I want.

Does anyone know how to turn off this wrapping?

Answer 1

Using list-style-position:outside; would be more doable if you were using an unordered list, which would always take the same amount of space for the marker. Since you are using an ordered list, I would stick with list-style-position:inside;. The problem, as you’ve discovered, is that IE and Firefox make the same amount of space for the marker irregardless of the number of digits in the marker or the size of the font. So you need to take matters into your own hands by creating the space yourself. The trick here is to know that, by default, IE and Firefox use different properties to create the space. IE uses margin on the <ol> (30 points) while Firefox uses padding (40 pixels), so you’ll have to reset both of these values to achieve cross-browser happiness.

Try this:

ol {     margin-left: 0;     padding-left: 3em;     list-style-position: outside; }