selected List item pushes out any image in IE

When creating a list (see below) and selecting an option which is bigger than the display area. The image in front of the option is pushed to the left (only in IE, FF seems to have no issues there).

I've tried playing around with the overflow and clip CSS styles, but was unable to work.

<script>
var obj = new AW.UI.List;
obj.setItemText(["bla1bla1bla1bla1bla1bla1bla1bla1","bla2bla2bla2bla2bla2bla2"]);
obj.setItemCount(2);
obj.setItemImage(["home","home"]);
obj.setItemValue(["1","2"]);
obj.setStyle("width","130px");
document.write(obj);
</script>


My workaround for now is to limit the text values with only the number of characters which will actually fit the width of the list (for my purposes the list will always be the same width, so that is ok).

There surely must be a better way of dealing with this.

Any help is appreciated.

This is because IE automatically scrolls the parent element to show the one which has focus. Maybe this will help -

obj.onCurrentItemChanged = function(i){
    this.setTimeout(function(){
        if (AW.ie){
            this.getItem(i).getContent("box").element().scrollLeft = 0;
        }
    });
}