I'm encountering an issue with my menu. It displays correctly in Firefox and Chrome, but in IE8 it appears as a vertical list instead of a horizontal menu.
I have included a doctype and I am linking to the HTML5 JavaScript via Google, so I'm not sure why it's not working as expected.
If anyone has any suggestions or insights on this matter, I would greatly appreciate it. Thank you for taking the time to help.
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:
Note: I seem to be struggling with displaying the div that starts here before the ul. The div has the 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>