how to fix this horizontal list on Chrome and Opera?


Tags: html,css,list,html-lists

Problem :

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>


Solution :

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/


    CSS Howto..

    How to set focus int o next tab using tab key?

    Only Javascript code to show a class without onclick

    How to over ride the transparency aspect in CSS

    Howto get html popup inside svg at correct position (using javascript)

    JSSOR slider: Image Gallery demo keeps showing highlight image on mobile

    How to set the added elements by jQuery to the behind of other element

    How to default toggle to open using css/jquery?

    how to keep form element inline with text on headline in HTML/css/boostrap 3?

    How to make an image behave like in Primefaces?

    Why is border radius not showing up in IE?

    How to check a css propert is supported?

    How to change CSS (background-image) from JQuery in Rails?

    How to get the “absolute” position of an html element

    How to increase width of Bootstrap container on Max width?

    How to assign JavaScript value to a CSS property? [duplicate]

    AJAX Call returns JSON, how to render properly formatted data

    How to use div to emulate border for elements?

    How to find all possible CSS Styles and Attributes of an Element?
    Make image show when screen reaches a certain width (pixels)