display:inline i IE?

Har denna CSS kod

#arrows {position:absolute; width:650px; text-align:right; top:640px; margin:0; padding:0;}
#arrows ul { list-style-type: none; margin:0; padding:0; border:1px solid #FFF;}
#arrows li { display:inline; margin:0; padding:0;}
#arrows li#left a { display:inline; background: url(images/Common.Arrow.Left.InActive.gif) no-repeat; height:27px; width:33px; text-align:left; margin:0 0 0 5px;  padding:0 33px 27px 0;}
#arrows li#right a { display:inline; background: url(images/Common.Arrow.Right.InActive.gif) no-repeat; height:27px; width:33px; text-align:left; margin:0 0 0 5px;  padding:0 33px 27px 0;}
#arrows li#left a:hover { background: url(images/Common.Arrow.Left.Active.gif) no-repeat;}
#arrows li#right a:hover { background: url(images/Common.Arrow.Right.Active.gif) no-repeat;}
#arrows li#left a:active { background: url(images/Common.Arrow.Left.Pressed.gif) no-repeat;}
#arrows li#right a:active { background: url(images/Common.Arrow.Right.Pressed.gif) no-repeat;}

Den fungerar perfekt i FireFox, men i IE ser jag inte knapparna, jag kan däremot klicka på dem eftersom jag vet vart de ska vara.

Om jag ändrar "display:inline" till "display:block" så ser jag knapparna i IE men då hamnar de ju på fel sätt..

Vad kan vara fel?

Prova att sätta float:left istället för display:inline

Tackar för hjälpen, jag löste det med display:block och float:right istället!