LI Element in Internet Explorer 8

Question

for some reason, my LI elements do not move left in Internet Explorer, they appear each below the other. Does anyone know how I can fix this?

#books ul{
    list-style:none;
    margin:0px;
    float:left;
    display:inline;
}
#books ul li{
    float:left;
    margin-right: 20px;
    padding-bottom: 20px;
    height:300px;
    display:inline;
}

Answer 1

If I understand your problem correctly, perhaps this is due to the display setting: inline. Display Change: block; seems to solve the problem in IE and FF.

#books ul{
list-style:none;
margin:0px;
float:left;
display:block;}

#books ul li {sail left; margin-right: 20px; padding-bottom: 20px; height: 300px; Display: unit;}

Answer 2

There is no need to use a float, if you want every LI to be inline, you can only use the display property.

#books ul{
    width: 100%;
    list-style: none;
    margin: 0px;
}
#books ul li{
    margin-right: 20px;
    padding-bottom: 20px;
    height: 300px;
    display: inline-block;
}