Inline lists not being displayed properly is a common problem in Internet Explorer. To demonstrate the problem, we can create an unordered list of hyperlinks:

<ul id="test">
<li><a href="#" title="Link title">Link</a></li>
<li><a href="#" title="Link title">Link</a></li>
<li><a href="#" title="Link title">Link</a></li>
</ul>

We can now style these to display inline with CSS. Because such styling is usually used to style a list of links as a menu within the webpage, we will add some padding to the list item link:

ul#test {
list-style-type: none;
}
#test li {
display: inline;
}
#test li a {
background: #8C1425;
color: #FFF
padding: 10px;
}

In the earlier versions of Internet Explorer, this does not display as we intended:

Firefox, Opera, Safari, and Internet Explorer 7 display it as intended:

To remedy the bug, we can apply position: relative to links within the list items:

#test li a {
background: #8C1425;
color: #FFF
padding: 10px;
position: relative;
}

Internet Explorer now displays the links as the other browsers do, and without the use of a conditional comment to apply additional style to the elements in Internet Explorer: