StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here's a JSfiddle with 2 examples: <a href="http://jsfiddle.net/9YtfT/" rel="nofollow">http://jsfiddle.net/9YtfT/</a></p> <p>The first horizontal list rounds the corners of the LI. The second uses the A tag as the border and rounds them.</p> <p>Depending on your browser (I think it's a Firefox thing) but rounding the borders of the LI tag can have an effect when there's a background color of a block level child (ie. the A tag). So, to get a cleaner effect, it would be better to round the A tag.</p> <p>But there's an example of both.</p> <p>UPDATE</p> <p>@Stephen The CSS is failing because of this selector:</p> <pre><code>.nav li:first-child .current_menu_item{ ... } </code></pre> <p>The selector is looking for a <em>child</em> element inside of the first <em>LI</em> tag with a class called "current_menu_item". Your HTML puts this class <em>on</em> the LI tag, not beneath it.</p> <p>To fix your css, you need to remove the space.</p> <pre><code>.nav li:first-child.current_menu_item{ ... } </code></pre> <p>This tells the browser to find the first-child LI with that has a class "current_menu_item". I think that will work. Of course, it begs to ask, if you're trying to round the first child, why are you targeting the "current_menu_item" class? You can remove it all together.</p> <pre><code>.nav li:first-child{ ... } </code></pre> <p>UPDATE 2</p> <p>I updated the JSFiddle to include class names to give a closer example to Stephen's situation:</p> <p><a href="http://jsfiddle.net/9YtfT/3/" rel="nofollow">http://jsfiddle.net/9YtfT/3/</a></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