Customizing HTML lists

I decided to change the ordered <ol> and unordered <ul> lists on the A2D web site to use a custom style based on one of the List-a-matic styles. The CSS I created looks like this:

.article-list {
padding: 1px 1px 1px 40px;
margin: 0px 0px 20px 100px;
background-color: #cccccc;
color: #ffffff;
border: 1px solid #cccccc;
}
.article-list li {
border-left: 2px solid #4c4c4c;
list-style: lower-alpha;
background-color: #ffffff;
color: #663300;
padding-left: 5px;
padding-bottom: 3px;
}


Wouldn't you know that IE 7 does not display these correctly, but Safari and Firefox show the list as the example image above. Back to debugging IE problems. The problem required a little investigation but isolating the <ul> and then removing and adding CSS style changes until the problem was located. In IE you must add the style padding-left: 40px to allow room for the custom list style lower case alpha characters!