This issue occurs when padding: 0 property is applied to a ul element. The bullet symbols do not appear.

Here is a sample page that demonstrates this issue: http://susam.in/files/notes/css-hacks/list-padding/list-padding.html. Here is the CSS used for both the HTML div elements.

ul {
    padding: 0;
    list-style: none;
    color: green;
    background: #ffdd88;
}
ul.circles {
    list-style: circle;
    color: maroon;
    background: #ddff88;
}

The second list in each output below uses the circles class.

Screenshot of the output in Firefox 3.6
Output in Firefox 3.6
Screenshot of the output in Internet Explorer 6
Output in Internet Explorer 6

The output in Internet Explorer 6 gives a clue about the issue. It shows that padding: 0 property is applied around the text only, and not around the text together with the bullet points. Thus, the bullets of the list with circles class are present beyond the left border of the list. The fix therefore simply requires adding some extra padding to the circles class.

ul.circles {
    list-style: circle;
    color: maroon;
    background: #ddff88;
    padding-left: 15px;
}

Here is a page that demonstrates the fix: http://susam.in/files/notes/css-hacks/list-padding/list-padding-fixed.html.

Screenshot of the output in Firefox 3.6
Output in Firefox 3.6
Screenshot of the output in Internet Explorer 6
Output in Internet Explorer 6

[css]

No comments

Post a comment

RSS