I am facing an issue with displaying an unordered list in IE6+7. The problem arises when styling the list items with specific width and height properties, causing IE to stack the items vertically instead of horizontally. Below is my code snippet:
For live example, visit: http://jsfiddle.net/NY94w/1/
HTML
<div>
<ul class="hozlist">
<li><a href="#" class="btnyellow ">View Details</a></li>
<li><a href="#" class="btnyellow ">View NDP</a></li>
<li><a href="#" class="btnyellow ">View News</a></li>
</ul>
</div>
CSS
ul.hozlist {
list-style: none;
padding: 0px;
margin: 0px;
text-align: left;
}
ul.hozlist li {display: inline-block; *display: inline}
.btnyellow
{
width: 93px;
height: 21px;
background: yellow;
border:1px solid red;
line-height:21px;
vertical-align: middle;
padding: 0;
cursor: pointer;
font-size: 70%;
text-align: center;
display: block;
}
a.btnyellow, a.btnyellowsmall{text-decoration: none;color: black;font-family: Arial;}