Ordered/Unordered Lists Not Displaying in IE

Ordered/Unordered Lists Not Displaying in IE

In Firefox my unordered list would display automatically indented with the bullet points displayed (which I now believe to be incorrect) e.g.


In IE the list would be left adjusted and the bullet points being overlapped by my left hand margin i.e.


Solution:
First I cleared out any left padding on any ordered or unordered lists:

ul, ol { padding-left: 0px; }

Then contained the list(s) within a div e.g. named Lists, which has a left padding value, the bullets/numbers were then not hidden:

.Lists { padding-left: 20px; }

After this change I also had lists within some RTE HTML output which were disappearing when displayed within a literal control. This was because I had no control over the inserted markup and therefore could not place a class on the ul or ol HTML tags. To get around the problem I placed the literal displaying the HTML within a div that had a named class of “ShowArticle” for instance, and added this to the existing List CSS class above, see below:

.Lists, .ShowArticle ul, .ShowArticle ol { padding-left: 20px; }

Et volia!

Leave a Reply

Your email address will not be published. Required fields are marked *