Problem with Ordered List in Internet Explorer

HTML & CSS
1

I have a problem with an Ordered List in Internet Explorer. The problem is the numbers are not displaying in my ordered list. I traced the problem down to this code which is in my .css file:

*{
    margin: 0;
    padding: 0;
}

If I remove this code only from my .css file, the numbers are displayed correctly in the ordered list. However, if I remove this code, it messes up my layout.

I have no problems with this code in Firefox, Safari, or the Google Chrome browsers.

Is there a work-around for this problem in Internet Explorer?

Lawrence

2

The code you specified removes padding and margin for all the html elements including ordered lists. Manually setting the margin for ordered list will resolve the issue like below:

ol {
margin-left: 20px;
}

This will place the number in the left edge of the viewport. You shall adjust the left margin as you needed.

3

Don’t set the margin, as this will not move the bullets/numbers inside the list (IE uses margin as default and is reason that bullets often disappear). Set a left padding on the <ol> - I usually use 1em.

4

Thank you. This solved the problem.

Lawrence