CODEWITHSUNDEEP
htmlcssinternet-explorer-7internet-explorer-6
davey
davey

Reputation: 1564

Unordered horizontal list issue in IE6 + 7

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

​

Upvotes: 0

Views: 317

Answers (3)

aivou
aivou

Reputation: 126

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

Upvotes: 2

Tomer
Tomer

Reputation: 17930

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

Upvotes: 0

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

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

ul.hozlist li {float: left}

SEE DEMO

Upvotes: 0

Related Questions