IE UL width fix

The only way I could get the <ul> custom lists to look right within IE 7 was to use the following Javascript code to adjust the widths os the <ul>:


windowWidth = $('content').clientWidth;
$A(document.getElementsByClassName(name)).each(function(element,index) {
// fix only for IE
if (Element.getStyle(element,'padding-left') != null) {
element.style.width = windowWidth - parseInt(Element.getStyle(elemen
t,'padding-left')) - parseInt(Element.getStyle(element,'padding-right')) - parse
Int(Element.getStyle(element,'margin-left')) - parseInt(Element.getStyle(element
,'margin-right'));
}
});


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!