CODEWITHSUNDEEP
htmlcsslisthtml-lists
sopanha
sopanha

Reputation: 345

how to fix this horizontal list on Chrome and Opera?

this is how it looks on chrome and operaThe last li drop down on chrome and opera, it looks fine on ie and firefox. how do i fix that? what cause them to look different? Thanks here is the http://jsfiddle.net

CSS:

<style>
*{
    padding:0;
    margin:0;
}
.wrapper{
    width:1000px;
}
    ul{
    background: #005984;
}

ul li{
    display:inline-block;
    *display:inline;
    *zoom:1;
    margin-right:37px;
}

ul li.last-child{
    margin-right:0;
}
ul li a{
    display: inline-block;
    *display:inline;
    *zoom:1;
    padding:15px 20px;
    color:white;
}
</style>

HTML:

<div class="wrapper">
    <ul>
        <li><a href="/">HOME</a></li>
        <li><a href="/products">PRODUCTS</a></li>
        <li><a href="/news">NEWS</a></li>
        <li><a href="/sales">SALES</a></li>
        <li><a href="/support">SUPPORT</a></li>
        <li><a href="/about-us">ABOUT US</a></li>
        <li class="last-child"><a href="/contact-us">CONTACT US</a></li>
    </ul>
</div>

Upvotes: 0

Views: 356

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105893

the difference might come from different font setting from a browser to another.

use : white-space:nowrap on ul , to keep all inline-boxes on 1 line :

http://jsfiddle.net/6yREk/1/

Upvotes: 2

Related Questions