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 use margin auto and reset. It is well ported to the PC in every browser (not IE9, but I have a conditional style sheet for this is not included).
Here is 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 interpretation is interpreted differently on the Mac? Or am I just making a stupid mistake?