Ul LI Меню не отображается как блок в IE

У меня есть меню, которое отображается правильно в Firefox и Chrome, в IE8 оно отображается как вертикальный список, а не горизонтальное меню.

Я не уверен, почему это не работает. У меня есть doctype, и я связываюсь с html5 js через google.

Мы ценим любые предложения. Заранее благодарю за ваше время.

CSS:

#tools {position: absolute; top: -23px; right: 7px; font-size: 0.75em;} 
#tools li {list-style:none; display: inline-block; padding: 0px 10px; border-left: 1px solid #e8e4d8; line-height: 1; margin: 0;}
#tools li:first-child {padding-left: 0; border-left: 0;}
#tools a {color: #e8e4d8; line-height: 1; margin: 0; padding: 0 0 1px 0; display: block; text-decoration: none;}
#tools a:hover {text-decoration: underline;}

HTML:

Примечание: не знаю, почему, но мне сложно отображать div который начинается здесь. поэтому перед ul является div id "tools"

< div id="tools" >         
<ul>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li id="last_tool"><a href="">link</a></li>
</ul>
</div>