For this you have to use list-style-position: outside (which is the default). However, IE & FF render the offset in different ways - IE uses left margin while FF uses left padding, so if the <ol> has a width then IE will not display the numbers as they are hidden outside the <ol> on the left. Trick here is to zero the margins on the <ol> and apply a left padding sufficient to bring the list numbers into view within <ol> :
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
ol {
width: 100px;
padding: 0 0 0 3em;
margin: 0;
}
li {
list-style-type: decimal-leading-zero;
list-style-position: outside;
}
-->
</style>
</head>
<body>
<ol id="test">
<li>test test test test test test test test</li>
<li>test test test test test test test test</li>
<li>test test test test test test test test</li>
</ol>
</body>
</html>
Posting Permissions
Bookmarks