StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The following works:</p> <pre><code>#menu { position:relative; width:100%; margin-bottom:10px; background-repeat: no-repeat; overflow: hidden; } #menu ul { display: block; list-style-type: none; position: relative; top:5px; margin-left:20px; margin-right:20px; background-color: #ff9025; overflow: hidden; } #menu ul li { display: block; position: relative; float: left; padding: 0 8px; height: 35px; background-color: #ffbf00; } #menu ul li:last-child { background-image: url(http://i.stack.imgur.com/WSJSV.png); background-position: 63% top; background-repeat: no-repeat; padding-right: 60px; } </code></pre> <p>Albeit, it's a bit of a kludge.</p> <p><a href="http://jsfiddle.net/davidThomas/kMJWB/" rel="nofollow">JS Fiddle demo</a>.</p> <p>Effectively I've removed the <code>background-image</code> from the <code>ul</code> (or the <code>nav</code>, I'm not sure, now) and added it to the end of the <code>li:last-child</code><sup>1</sup>, positioning it so that the stripe is seen. This involved adding sufficient padding to that element, and styling the <code>ul</code> with the <code>background-color</code> of the right side of the image, and the <code>li</code> elements with the left side colour in order to feign the image. It's not ideal, but I think it works reliably. Certainly I'd suggest adding, and commenting-out, further <code>li</code> elements to test it, though.</p> <p><strong>Edited</strong> following my discovery of IE's near complete lack of <code>:last-child</code> support, to use jQuery (as you say your site uses it already, in your comments):</p> <pre><code>$('#menu li:last').addClass('lastChild'); </code></pre> <p><a href="http://jsfiddle.net/davidThomas/kMJWB/1/" rel="nofollow">JS Fiddle demo</a>.</p> <hr /> <p><strong>Edited</strong> to what I <em>think</em> should be the final version, featuring a feature-detection to enable the jQuery option in the absence of <code>:last-child</code> support (albeit I can't explicitly test, as yet, that <code>:last-child</code> <em>itself</em> doesn't exist, but I suspect that a browser that doesn't support <code>document.querySelectorAll()</code> <em>probably</em> doesn't support <code>:last-child</code>, which is, really, a terrible assumption):</p> <pre><code>if (!document.querySelectorAll){ $('#menu li:last').addClass('lastChild'); } </code></pre> <p><a href="http://jsfiddle.net/davidThomas/kMJWB/5/" rel="nofollow">JS Fiddle demo</a>.</p> <hr /> <ol> <li>This is a problem for older browsers, particularly of the IE vintage, since as I recall versions earlier to 7 had problems with the <code>:last-child</code> pseudo-selector. On review of the <a href="http://www.quirksmode.org/css/contents.html#t35" rel="nofollow">compatibility tables</a>, at <a href="http://www.quirksmode.org/" rel="nofollow">Quirksmode.org</a>, it appears even worse than I thought: no versions lower than IE9 support the <code>:last-child</code> selector.</li> </ol>

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