Unordered horizontal list issue in IE6 + 7

Question

I have an unordered list which displays fine in most browsers except for ie6+7. The problem is where i've styled the list items giving them a width and height and displaying them as a block so the have correct size. IE interprets the block and places the list items vertically rather then horizontally here is my code;

jsfiddle: 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;}

​

Answer 1

While A.K's answer would solve your problem, using float is not always the best solution. In case you do not want to float your elements you could add zoom:1 to your ul.hozlist li {} rules set.

ul.hozlist li {display: inline-block; *display: inline; zoom:1;}

Answer 2

use float:left in the following instead of display: inline-block; *display: inline

ul.hozlist li {float: left}

SEE DEMO

Answer 3

IE supports inline-block, but only for elements that are natively inline. So, if you really want to use inline-block, you’re restricted to spans and strongs and ems

Use float:left instead of inline-block:

ul.hozlist li {float: left;}