Home/ Questions/Q 6889703
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T06:11:23+00:00

I have a wrapper, then ul, then li with padding and left float. In

  • 0

I have a wrapper, then ul, then li with padding and left float.

In Mac Firefox and Safari, the last <li> child moves to the next line.

I’m using margin auto and a reset. It renders fine on PC in every browser (not IE9, but I have conditional style sheet for this not included).

Here’s the code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; 
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    text-decoration: none;
    list-style: none;

}
#wrapper {
    margin: 0 auto;
    width: 960px;
    padding: 0;
}
ul {
    list-style: none;
    font-size: 13px;
    font-weight: normal;
    background-color: #fff;
    width: 960px;
    font-family: Arial, Helvetica, sans-serif;
    height: 36px;
    margin: 0;
}
li {
    float: left;
    padding: 10px 20px 10px 20px;
    background-color: #e7e2d7;
    color: #4a4a4a;
    margin: 0;
}
li.selected {
    color: #fff;
    background-color: #218308;
    background-image: url(../ui/nav-selected-arrow.png);
    background-repeat: no-repeat;
    background-position: center top;
}
li a {
    color: #4a4a4a; 
}
li a:hover {
    text-decoration: underline;
}
li.selected a {
    color: #fff;    
}
</style>
<body>
<div id="wrapper">
    <ul>
        <li class="selected"><a>Becket Court</a></li>
        <li><a>Darwin College</a></li>
        <li><a>Eliot College</a></li>
        <li><a>Keynes College</a></li>
        <li><a>Park Wood</a></li>
        <li><a>Rutherford College</a></li>
        <li><a>Tyler Court</a></li>
        <li><a>Woolf College</a></li>
    </ul>
</div>

Is there a reason the padding is interpreted differently on Mac? Or am I just making a stupid mistake?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d guess that the padding is actually exactly the same on Mac and PC, but the font is rendered slightly differently, resulting in the width of some <li>s being greater on the Mac, resulting in the last item wrapping onto the next line.

    You can check using the Firebug add-on for Firefox on both Mac and PC, or Google Chrome’s built-in inspector.

    • 0