Question

I have a problem with the rendering of the navigation in Firefox. It is fine in Chrome and Opera, but in Firefox the whole navigation div floats right at the top right corner.

HTML:

<nav class="table">
    <ul id="menu">
        <li><a href="#">Business</a></li>
        <li><a href="#">Specialities</a></li>
        <li><a href="#">Contact us</a></li>
    </ul> 
</nav>

And the CSS is:

.table {
    display: table;
    margin: 0 auto;
    background: #ffe;
}


ul#menu {
    min-width: 100%;
    list-style: none;
    margin: 1em 0 1em 0;
}

ul#menu li {
    display: inline;
    margin: 3em;
    padding: 0;
}

ul#menu li a {
    font-weight: bold;
    font-size: 1em;
    text-decoration: none;
    text-transform: uppercase;
}

Answer 1

The attribute margin you are setting it to “0 auto”. With the information given I see the navigation in the left top corner in chrome also. And it is correct to see it there.

The attribute margin has the structure: top right bottom left //Thank you PeeHaa

It is the same if you use the following attributes: margin-right, margin-left, margin-top and margin-bottom. Those are to specify a particular margin.

If this doesn’t answer your question, then you have to see if you have some

position:fixed;

or

position:absolute;

or

float:left/right;

for any tag into your html.