Databases
StackOverflow2013
Postsdbo
POWhy is <li> padding being interpreted different on Mac?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is <li> padding being interpreted different on Mac?
    text
    copied!<p>I have a wrapper, then ul, then li with padding and left float.</p> <p>In Mac Firefox and Safari, the last <code>&lt;li&gt;</code> child moves to the next line.</p> <p>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).</p> <ul> <li><a href="http://www.rv333.com/stackoverflow/index.html" rel="nofollow">http://www.rv333.com/stackoverflow/index.html</a></li> <li><a href="http://www.rv333.com/stackoverflow/pc.png/http://www.rv333.com/stackoverflow/pc.png" rel="nofollow">http://www.rv333.com/stackoverflow/pc.png/http://www.rv333.com/stackoverflow/pc.png</a></li> </ul> <p>Here’s the code:</p> <pre><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; } &lt;/style&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;ul&gt; &lt;li class="selected"&gt;&lt;a&gt;Becket Court&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;Darwin College&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;Eliot College&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;Keynes College&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;Park Wood&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;Rutherford College&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;Tyler Court&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;Woolf College&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>Is there a reason the padding is interpreted differently on Mac? Or am I just making a stupid mistake?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload