Template talk:Navbox

Semantic and accesssible list markup

Many thousands of Wikipedia articles have navboxes, in which lists of links are presented, horizontally, without using list mark-up, but instead using {{·}} or suchlike as a kludge. This is semantically poor and has implications for accessibility; not least as every {{·}} is read out as the word "bullet", to blind people using screen-readers.

To remedy that, a group of editors have collaborated to add to Common.css a class called hlist to which is now used by {{Flatlist}}. Here's a sample edit, adding it to a navbox. The visual output should be the same in all modern browsers; this has been widely tested.

The question now, is how best to apply the class to navboxes across Wikipedia? A bot job, obviously, but using {{flatlist}}, or some other mechanism? And are there any issues we should be aware of first? {{flatlist}} can be used with ordinary (UL) or ordered (OL) lists. Andy Mabbett (User:Pigsonthewing); Andy's talk; Andy's edits 18:37, 22 April 2011 (UTC)

On IE8 (at least), this does not look good. The bullet is immediately adjacent to the right-most word instead of centered between list elements. I would not want to see this deployed without aesthetic improvements first. — Andrwsc (talk · contribs) 18:53, 22 April 2011 (UTC)

Odd. Looks good on my IE8, with the exception of a bullet added after te last item. — Edokter (talk) — 19:01, 22 April 2011 (UTC)

Specific CSS issues are best discussed at MediaWiki Talk:Common.css#Horizontal lists. Andy Mabbett (User:Pigsonthewing); Andy's talk; Andy's edits 19:05, 22 April 2011 (UTC)

…which you are doing, of course. Andy Mabbett (User:Pigsonthewing); Andy's talk; Andy's edits 19:24, 22 April 2011 (UTC)

You may need to do a hard refresh/ clear your cache. Andy Mabbett (User:Pigsonthewing); Andy's talk; Andy's edits 19:05, 22 April 2011 (UTC)

Tried that, no effect. I have no custom css etc., just the vanilla wikipedia browsing experience. I see the same effects when I log off. — Andrwsc (talk · contribs) 19:07, 22 April 2011 (UTC)

Get a proper browser ;-) Seriously, I've just tried IE8, and don't see that spacing problem. Can you try zooming in and out, please, and see if that makes a difference. Again, MediaWiki Talk:Common.css#Horizontal lists is the best place to continue this. Andy Mabbett (User:Pigsonthewing); Andy's talk; Andy's edits 19:24, 22 April 2011 (UTC)

See also two related deletion debates. Andy Mabbett (User:Pigsonthewing); Andy's talk; Andy's edits 19:10, 22 April 2011 (UTC)

Just wondering if it would be worth adding a |flatlist=yes parameter to the navbox template to allow for an option of making all the lists use the hlist class. -- WOSlinker (talk) 20:22, 22 April 2011 (UTC)

For example:

{{Navbox/sandbox
|navbar=plain
|title = Example
|group1=Group 1
|list1=
*Item 1
*Item 2
*Item 3
*Item 4
*Item 5
*Item 6
*Item 7
*Item 8
|group2=Group 2
|list2=
*Item 1
*Item 2
*Item 3
*Item 4
*Item 5
*Item 6
*Item 7
*Item 8
}}

It may not need the parameter... How many navboxes do you see that have (vertical) bulleted lists? Just assign the "hlist nomargin" classes to the list cells. — Edokter (talk) — 20:27, 22 April 2011 (UTC)

Template:Navbox with columns comes to mind as a place where vertical lists might be (more properly) used.
On another note, I support this general change. --Izno (talk) 21:24, 22 April 2011 (UTC)

Hadn't thought of that. Shouldn't be hard to filter out. — Edokter (talk) — 22:59, 22 April 2011 (UTC)

---

How can we move this forward? Andy Mabbett (User:Pigsonthewing); Andy's talk; Andy's edits 21:56, 27 April 2011 (UTC)

We'll get to it. Currently investigating {{navbox with columns}} for use of bulleted lists. — Edokter (talk) — 00:52, 29 April 2011 (UTC)

┌────────────────────────────────────────────────────────────────────────────────────────────────────┘ Any news? Andy Mabbett (User:Pigsonthewing); Andy's talk; Andy's edits 14:13, 17 May 2011 (UTC)

Nudge. Andy Mabbett (Pigsonthewing); Andy's talk; Andy's edits 23:30, 24 August 2011 (UTC)

I would just like to say, I would rather see this named |vlist=yes and just have {{Navbox}} and friends directly implement what {{flatlist}} does without the extra template inclusion by using hlist CSS class by default on lists within |listn= (there is already a <div>...</div> on each one). Anything that uses {{·}} will not have any issues with this default and allows them to (in most cases) be converted in a straightforward manner. 67.210.196.5 (talk) 17:27, 25 September 2011 (UTC)

This is a really good idea. --Dianna (talk) 03:07, 16 October 2011 (UTC)

If you read further up, you'll that for most cases, the hlist class could be applied by default, so instead, adding a parameter could be there to switch the option off rather than on for the occasional case where it doesn't work. -- WOSlinker (talk) 09:32, 16 October 2011 (UTC)

Although one advantage of switching the option on rather than on by default is that it would be easier to track which navboxes had been converted. On by default could be added later once most navboxes were using flatlists. -- WOSlinker (talk) 09:36, 16 October 2011 (UTC)

If I don't hear any more on this in the next few weeks, I'll see about adding a flatlist param. -- WOSlinker (talk) 08:30, 23 October 2011 (UTC)

As far as I'm aware, the display problems for Flatlist have still not been resolved. When I view {{Edmonton elections}} in IE the dots are still skewed towards the right-hand link, and extra dots still appear at the end of lists (see here). I am not comfortable with this being rolled out further before the problems are fixed. Number 57 09:49, 23 October 2011 (UTC)

As far as I am aware the display problems are IE's display problems and not Flatlist's display problems. This has been fixed in IE 10 and actually rendered correctly in IE 9 under compatibility mode. It is true many people are using old versions of IE but that hardly means we should bend to that just because a broken browser is popular. Some addition discussion is available here: User talk:Diannaa/Archive 13#Flatlist. Further this has been fixed for mostly of IE versions less than 9 via [1]. 67.210.196.5 (talk) 17:44, 28 October 2011 (UTC)

Child causes HTML error

The use of |child= causes an HTML validation error, for example {{navbox}} Renders as

Which cause an error on this page; see W3C markup validation for Template talk:Navbox. ---— Gadget850 (Ed) ^talk 01:45, 24 August 2011 (UTC)

• I don't think this has anything to do with Navbox. It looks like this is happening for all Vector-skin pages (at least for me). If you look at the source, it appears to be in the Vector menu and is because of an empty <ul></ul> pair. I just tested it out and this happens regardless of whether there's a Navbox or not. I use Monobook by default, and the problem doesn't manifest for that skin. --CapitalR (talk) 00:14, 26 August 2011 (UTC)

I should have noted that the <ul> issue has been occurring for ages. I did not use a live use of {{navbox}} in my example— this has been updated. The error in question is end tag for "table" which is not finished. ---— Gadget850 (Ed) ^talk 00:40, 26 August 2011 (UTC)

It's because if you just use {{navbox|child=xxx}}, you end up with a <table></table> set of tags. If you actually put in some content such as list1=a then the table tags are no longer empty and so pass validation. -- WOSlinker (talk) 07:04, 26 August 2011 (UTC)

I thought I had tracked it here, but perhaps I'm wrong. Pages that are giving this error:

• Template:Navbox with collapsible groups/doc; W3C markup validation for Template:Navbox with collapsible groups/doc
• {{Free Imperial Cities}}; W3C markup validation for Template:Free Imperial Cities
• {{IPA navigation}}; W3C markup validation for Template:IPA navigation

---— Gadget850 (Ed) ^talk 11:05, 26 August 2011 (UTC)

I think this edit has fixed the issue. -- WOSlinker (talk) 11:37, 26 August 2011 (UTC)

Those pages are still failing validation. ---— Gadget850 (Ed) ^talk 11:44, 26 August 2011 (UTC)

Probably just due to cacheing. I've purged the pages and I'm only seeing the two ul errors myself. -- WOSlinker (talk) 12:53, 26 August 2011 (UTC)

Fixed That did it. Thanks. ---— Gadget850 (Ed) ^talk 13:09, 26 August 2011 (UTC)

Help importing this template to the spanish wiki

There's a watered down version of this template in the spanish wiki, but in order to use the "subgroup" template, you must have the english wikipedia code of the navbox template. I've been trying to copy and paste the code from this wikipedia, to the spanish wiki. It works, sort of though... here's an examlple: es:Plantilla:Navegación/núcleo2/test, I haven't figured out yet what's not working properly... and I can't seem to fix it. The "subgroup" template in the spanish wiki is a direct copy from the english wiki... so basically both the navbox and subgroup codes are identical (I deleted the navbar code, but even if left on, the same problem occurs).

Navbar code in the spanish wiki: es:Plantilla:Navegación/núcleo2
Subgroup code in the spanish wiki: es:Plantilla:Navegación/subgrupo.

The code I'm using in the "test" is also a direct copy from the enlgish wiki.

Am I doing something wrong? Or is it that the spanish wiki doesn't support some parts of the code? Thanks for your time. --MindZiper (talk) 00:31, 26 September 2011 (UTC)

• Hi MindZiper -- the Navbox template depends on some CSS located in MediaWiki:Common.css (just look for the navbox section there). Without that CSS on the Spanish wiki the template will look a little odd and not be properly formatted. --CapitalR (talk) 08:12, 26 September 2011 (UTC)

Is there a way to import the code needed for the navbox into the spanish wiki? I don't seem to find any "link" that directs to that code in particular within the navbox code. EDIT: I think I got it. --MindZiper (talk) 01:32, 27 September 2011 (UTC)

Flatlist problems

A template I watch was recently converted to flatlist. When viewed in any version of IE, it creates several problems, most notably the major misalignment of the dots and the addition of an extra dot after the end of the list (example below). Can anyone help solve this? Unfortunately the only answers I've had so far is to question why I've chosen to use the wrong browser (IE, the most commonly used one in the world), to have to switch to compatibility view (which works, but I don't see why readers should have to do this, and it isn't available on older versions of IE), and to say that Microsoft should solve the problem. In the meantime I've been told to just put up with the problem rather than revert to the issue-free version - is this acceptable? Number 57 08:55, 1 October 2011 (UTC)

Which version of IE do you use? I've just tried Template:Edmonton elections in IE 8 & 9 and it looks fire for me. -- WOSlinker (talk) 09:24, 1 October 2011 (UTC)

It has the problem when viewed in IE8 on Win XP. GraemeLeggett (talk) 09:29, 1 October 2011 (UTC)

Except for the trailing dots (due to IE's lack of support for :last-child), I see no allignment issues on IE8 (XP), except when enabling compatibility view. — Edokter (talk) — 10:10, 1 October 2011 (UTC)

This is how it displays in IE8 and compatibility mode doesn't help much.

Template as displayed in Internet Explorer 8

However IE9 in compatibility mode is more standards-compliant, i.e. it understands the :last-child css selector and can format the last item in a list as required. However, IE9 requires a HTML5 doctype declaration to automatically change to compatibility mode, so you have to click the button manually.

Template as displayed in Internet Explorer 9 with compatibility mode turned on

The so-called "issue-free version" is the one where Number 57 has no issues, but all of our visually-impaired visitors have to hear things like "1892, dot, 1893, dot ..." etc. It doesn't meet our standards for accessibility, and I'm disappointed that Number 57 prefers to force that version on disabled visitors rather than click a button or use a standards-compatible browser. I'm sorry he doesn't like the replies he's had from me, but it would be far better to seek a consensus than to edit-war to impose a preferred version. Perhaps others here can suggest possibilities that would address both the issues of accessibility and Number 57's concerns? --RexxS (talk) 10:31, 1 October 2011 (UTC)

Just read the WP:Accessibility notes and in referring to templates such lists may be styled with the class "horizontal". Not being up on the coding, what would that do if used instead of flatlist in this case?

Sadly, it won't help because {{Flatlist}} is effectively a convenience to apply the class .hlist (an updated version of class .horizontal) to a list, to save editors from having to deal with classes. The problem is that our css definition of the class .hlist in MediaWiki:Common.css relies on a css feature to identify the last item in a list and suppress the image of the dot. Microsoft failed to implement that feature until version 9 of Internet Explorer, although it has been available in all the other common browsers for some considerable time. It is a problem that will go away eventually as Microsoft brings its browser into line with universally accepted web standards. In the meantime, any ideas for avoiding problems such as concern Number 57 would be welcome, as long as they don't sacrifice accessibility for disabled viewers. One earlier suggestion for {{Flatlist}} was to put the dot before each item and suppress the dot on the first item (Internet Explorer 7 & 8 are capable of selecting the first item, but not the last!). However, this had the undesirable effect, when a long list wrapped onto a new line, of having the new line start with a dot – and consensus went against that. --RexxS (talk) 12:25, 1 October 2011 (UTC)

"selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest." :last-child is listed. Might be worth checking out. ---— Gadget850 (Ed) ^talk 13:41, 1 October 2011 (UTC)

This may work, but I think it is the wrong kind of solution. We should not be telling readers/editors to download special scripts so they can see things correctly - we should make templates that everyone can view correctly regardless of their browser type. Number 57 22:15, 1 October 2011 (UTC)

Readers/editors wouldn't need to. But I believe we should not depend on scripts too much. Personally, I still favor putting the bullet in front of the items; it is a list after all. So I think we need to explore that option again. — Edokter (talk) — 22:20, 1 October 2011 (UTC)

I just saw Template talk:Flatlist#Viewing problems, just below a prior suggestion I'd made: Template talk:Flatlist#Nested list, again. Issues with Internet Explorer are common, as it is known for quirky behavior and poor CSS support. This seems a minor rendering issue with a buggy (and obstinant) browser, really. The accessibility benefits of flatlist far outweigh a few off-pixels. IE users have options: Incompatibility mode, to downloading a better browser. Beyond the vision impaired, there are many sighted mobile users that benefit from nav-lists /being/ lists, as flatlist offers.

FYI, the /Nested list, again/ suggestion I made was about getting pseudo-groups (i.e. nested lists) to work inline using .hlist li ul { display: inline; }; help with that idea would be appreciated. It would also be nice to get the nowrap adjusted to make whole li-tags not wrap — things like "* book title (year)". Something like: .hlist li { white-space: nowrap; }.

I'd be wary of putting the middots /before/ items as these are really interpunct, not bullets; such punctuation logically follows, not precedes. Dots at the beginning of wrapped lines would be unfortunate. The padding/margin values used w/flatlist may be able to be tweaked to get more consistent rendering—if so, fine—but deployment of flatlist should not be thwarted.  —Portuguese Man o' War 23:09, 1 October 2011 (UTC)

I fail to understand why some editors think the answer is to tell others that they need to download a new browser because some changes they've made don't work in IE - it smacks or smugness and arrogance. Like it or not, IE is the most common browser used, and you can't ask over 40% of internet users to change their browser because someone can't get the code to work. Number 57 23:24, 1 October 2011 (UTC)

Offering the idea of other browsers is /helpful/. This is a failing of IE's code, not the flatlist/hlist code (which isn't mine). The code in use here, is good, standards-compliant code, that IE is improperly rendering. You seem intent on restricting wiki to the capabilities of the least capable browser. Please don't; a few off-pixels is no big deal.

(ec; re; 'you')  —Portuguese Man o' War 23:39, 1 October 2011 (UTC)

I fail to understand how some people can hang on to outdated software, and seemingly expect the rest of the world to cease progressing. Andy Mabbett (Pigsonthewing); Andy's talk; Andy's edits 19:45, 15 October 2011 (UTC)

┌────────────────────────────────────────────────────────────────────────────────────────────────────┘ I've had a good search to see how the javascript modules do the job of emulating :last-child. After much trial and error in my monobook.css, I have a slight improvement available for IE8 in compatibility mode:

.hlist li {background-image: expression(this.nextSibling==null?'none':'');}
.hlist li {padding-right: expression(this.nextSibling==null?'0em':'0.4em');}
.hlist li {margin-right: expression(this.nextSibling==null?'0em':'0.2em');}

You can paste it into your own local css and see how (badly) it works in your version of Internet Explorer. Without compatibility mode, IE8 displays cleanly, but with the dot at the end of each list as before. In compatibility mode, IE8 evaluates the 'expression' syntax and clears the final dot. Other browsers ignore that, so are unaffected by the declarations. I've had to jigger the right-padding & right-margin to make it look similar to other browsers, but sadly IE8 in compatibility mode doesn't maintain a right-padding against the right border of a container, so it may squash the dot into the text at the end of each line that wraps. Ugly, but that's MS for you. It would be interesting to see how this shows up in IE9 in compatibility mode, but I haven't checked yet. --RexxS (talk) 00:15, 2 October 2011 (UTC)

It doesn't seem to hurt any, although I run Chrome using Internet Explorer Immunity Mode. Good luck with it.  —Portuguese Man o' War 00:43, 2 October 2011 (UTC)

@Rexx: I have tried this out on my laptop in IE9, and it looks fine when I load the page. When I switch to compatibility mode, the dot at the end of each line is squished against the text.

@Number 57: You might be interested to know that there are rounded corners, shadows, and eye-popping things on my user page and talk page which you are missing out on, as they don't appear in IE. I am now returning to Firefox. Regards, --Dianna (talk) 07:43, 2 October 2011 (UTC)

(Off-topic) Dianna, you may want to check out {{border-radius}} and {{box-shadow}} for cross-browser eye-candy support for your user page. — Edokter (talk) — 07:54, 2 October 2011 (UTC)

Thanks. I think I will try out the gradient :) --Dianna (talk) 14:47, 2 October 2011 (UTC)

Hi. I have been referred here by User:Frietjes re: Template:Roy Harper which has recently become illegible on my browser (IE8). All other templates fit my screen fine, there are 4 here (Jimmy Page) that are perfect. So, can anyone fix this? I am at the limit of my abilities, creating the template was hard enough and if it wasn't broken, why fix it? Thanks. Stephenjh (talk) 09:03, 12 November 2011 (UTC)

You should see the thread below: #Wrapping issues. The issue is that you're using IE's "Compatibility Mode" instead of standard mode. Button on your toolbar→click it. Alarbus (talk) 09:16, 12 November 2011 (UTC)

I thank you. Stephenjh (talk) 09:24, 12 November 2011 (UTC)

Partial fix

I've added one line of javascript to Common.js that at least removes the trailing dot from the last list item in IE 6, 7 and 8. So far, nothing I can do about the misallignment of the dots in IE8's compatibility mode. — Edokter (talk) — 17:00, 24 October 2011 (UTC)

Semantic and accesssible list markup, redux

May I refer fellow editors to Semantic and accesssible list markup, above which seems to have stalled? Andy Mabbett (Pigsonthewing); Andy's talk; Andy's edits 19:42, 15 October 2011 (UTC)

aligning navbox columns with children

To eliminate duplication of content, I made a few child navbox templates that integrated into parent templates like this:

http://en.wikipedia.org/w/index.php?title=Template:Elections_in_Austria-Hungary&oldid=457475149

However, the columns weren't perfectly aligned, so another user copied and pasted the child templates back in. Is there some way we could get both features at the same time? --Joy [shallot] (talk) 17:06, 26 October 2011 (UTC)

currently the only way I know of how to get them to have the same size, is to pass a "groupwidth" parameter. it would be great if it were possible to have the children all automatically have the same width, but right now they are technically in separate html tables, so that is not possible. Frietjes (talk) 19:01, 26 October 2011 (UTC)

I infer from this that the groupwidth parameter can't take any value other than in em's or px's, which isn't compatible with varying font widths per se? I'm not sure if that's unacceptable in the general use case - the result seems to render fine for me no matter how much I do Ctrl+plus/Ctrl+minus - I know that doesn't emulate all the various resolutions, but still. Can you check? --Joy [shallot] (talk) 10:32, 27 October 2011 (UTC)

the em units should resize when the font is resized, but as we know what happens with varying browsers ... I think the best solution would be to have the subtemplates generate the table rows, but not the table around it, and then the parent template would generate the containing table. This would require some changes though to make this work. Frietjes (talk) 17:42, 27 October 2011 (UTC)

I think that would be very convoluted, and even this change didn't fit well with User:Number 57, so I'm wary of extending the technical issue into another twist. --Joy [shallot] (talk) 07:58, 28 October 2011 (UTC)

on my browser (Firefox, Linux) the groupwidth=16em is perfect, but the 15em is still a bit ragged. Frietjes (talk) 17:44, 27 October 2011 (UTC)

In the meantime, I reduced the text length as well as the groupwidth. Can you check Template:Elections in Austria-Hungary again please? :) --Joy [shallot] (talk) 07:56, 28 October 2011 (UTC)

yes, that looks perfect on my browser. Frietjes (talk) 15:20, 28 October 2011 (UTC)

Category changes

In this CfD nomination, I've suggested changing all of the content-based navbox category names to Category:(X) navigational boxes. We've been heading that direction in the last few weeks, and I'd like to see it done automatically so that the category names aren't quite so wildly different. Please comment over at CfD if you have opinions on this.--Mike Selinker (talk) 09:52, 28 October 2011 (UTC)

Problems with "best practice"

Hi, template edits made here and here with summary like "update to best practice" have messed up the formatting, at least in IE8. Example "before and after" screenshots from IE are here. As you can see, while the old version is fine, the bullets, or interpuncts, or whatever they are, look horrible in the new version.

Unless there are worse problems with the old format that I am not seeing (e.g in other broswers), my feeling is that these changes need to be undone wherever they have been implemented, and any claim anywhere that they are "best practice" needs to be removed. I am raising it here in case it is a widespread problem or problem in the making. Regards, 86.177.108.207 (talk) 03:35, 10 November 2011 (UTC)

There is a simple solution: at the top of your browser bar there is an icon that looks like a ripped piece of paper. Click on that button, and Internet Explorer will enter or leave "Compatibility Mode". This is a hack that Internet Explorer has added to their software to get it to display images correctly. Click on the little icon in IE8 and you will exit Compatibility Mode, and the template will then display correctly. Microsoft has fixed the problem for IE10, and IE9 is displaying correctly after the recent upgrades to the MediaWiki software. --Dianna (talk) 05:57, 10 November 2011 (UTC)

That icon is not displayed for a sample of affected pages that I have just checked. Additionally, I have noticed that pages are now showing new-style navboxes without any line-wrapping, with the result that take up an enormous width, and require a great deal of ugly horizontal scrolling to navigate the links. A typical example is the "Polar Exploration" box at Northwest Passage. I have not seen this with old-style navboxes, so I am assuming (without absolute proof) that it is all part of the same problem.* Unless a specific decision has been made that IE8 is not to be supported, these issues need to be fixed, and if they can't be fixed promptly then we need to roll back to the old navbox formatting, in my opinion. 109.151.34.223 (talk) 20:31, 10 November 2011 (UTC)

* Further, the page Template:American_Civil_War shows the bullet formatting problem but not the no-line-wrap problem. However, in situ in the article Abraham Lincoln, the box shows both problems (bullet formatting and huge horizontal extent). I'm not technical enough to have a clue what is going on, but if you want me to test any other examples I will be happy to do so. 109.151.34.223 (talk) 20:50, 10 November 2011 (UTC)

Compatibility view is disastrous. Anyway, if you cannot see the compatibility view button, go to Page or Tools, then go to Compatibility View Options and remove wikipedia.org from the list. That should fix all display issues. — Edokter (talk) — 20:54, 10 November 2011 (UTC)

Thanks, but unfortunately I don't see wikipedia.org listed there. What is "disastrous" (in a limited sense of the word), in my opinion, is that something apparently being touted as "best practice" breaks badly in what is still, I believe, a very commonly used browser. I personally don't think it's acceptable that the user should have to make any special browser fixes or adjustments when they have such a mainstream setup. I very much hope, amongst the technical people who could actually diagnose this, this isn't going to become another case of "don't use that browser, don't care". 109.151.34.223 (talk) 21:32, 10 November 2011 (UTC)

I agree with your sentiments completely. Wikipedia should serve everyone (including those with IE) instead of just those it would like to have (i.e. those without IE). I'm not keen on having pages render improperly by default on such a common browser. Very few will take the time to investigate the reason and change compatibility modes or whatever; instead they'll just believe it's a Wikipedia bug. Unfortunately, as you can see in discussions above, we're in the minority on this view. --CapitalR (talk) 21:53, 10 November 2011 (UTC)

Though the added accessibility benefit of hlist and flatlist does count for something. --CapitalR (talk) 21:55, 10 November 2011 (UTC)

It may be that the "Display all website in Compatibility View" box is ticked. Would be nice if the "X-UA-Compatible" meta tag could be added to the wikipedia site. -- WOSlinker (talk) 22:17, 10 November 2011 (UTC)

That would limit features to one specific IE version, not a good idea. What needs to be done is change the doctype to HTML5. This was done a short while ago, but was reverted later; I forgot the reason. — Edokter (talk) — 22:35, 10 November 2011 (UTC)

See Wikipedia:Wikipedia Signpost/2011-02-28/Technology report. ---— Gadget850 (Ed) ^talk 12:56, 11 November 2011 (UTC)

Can use <meta http-equiv="X-UA-Compatible" content="IE=edge"> in that case. -- WOSlinker (talk) 12:44, 11 November 2011 (UTC)

Wikipedia.org should not be viewed in compatibility mode in the first place. Do you have IE8 or IE9? — Edokter (talk) — 22:11, 10 November 2011 (UTC)

I'm using IE8. In IE "Compatibility View Settings" window I see:

Websites you've added to Compatibility View: Empty

Include updated website lists from Microsoft: Checked

Display intranet sites in Compatibility View: Checked

Display all websites in Compatiblity View: Unchecked

As far as I'm aware, I have never changed any of these settings. 109.151.34.223 (talk) 22:59, 10 November 2011 (UTC)

How to implement flatlist?

I have added the listclass parameter. This will eliminate the need for using {{flatlist}}. The only thing needed to produce horizontal lists is to add listclass = hlist to your navbox, and it will automatically format the list cells as horizontal lists. — Edokter (talk) — 09:07, 10 November 2011 (UTC)

This is excellent. It needs adding to the siblings of navbox and to be passed through from things like {{military navigation}}. Flatlist is not just used in nav-list; it's in groups, above, and below, and this seems to need some extending for that. Here, belowclass = hlist didn't work; I had to go back to flatlist for the below. Here, I would need support for 'group', and in {{navbox with collapsible groups}}. Thanks. Alarbus (talk) 13:07, 10 November 2011 (UTC)

You can also use bodyclass = hlist to make every list horizontal. — Edokter (talk) — 13:10, 10 November 2011 (UTC)

I discovered below does not start on a new line, making the first list item fail. I'm not so sure about having lists in group though. — Edokter (talk) — 13:15, 10 November 2011 (UTC)

fyi (maybe you could check group4? I'm concerned about 'Sovereign Military Order of Malta' — see also)

See my post on talk:common.css; Template:American Civil War is using flatlist in horizontal groups; this is common, although most are still using the dot-template method. I saw that the first '*' was showing in the below example, which would seem a parsing problem; not at the beginning of the line would do it. You looking somewhere in the implementaions, right; fixable? Alarbus (talk) 13:25, 10 November 2011 (UTC)

Should be fixed now; below now start on a new line, and {{navbox with collapsible groups}} now passes all classes. — Edokter (talk) — 13:35, 10 November 2011 (UTC)

Works for me. Thanks; gotta go. Will look-back later. And will push some other other stuff along. See {{Europe topic}}. Alarbus (talk) 13:38, 10 November 2011 (UTC)

I was reverted on Europe topic, so... more eyes. Alarbus (talk) 14:06, 10 November 2011 (UTC)

Please ask why you were reverted; I could see no adverse effects. — Edokter (talk) — 14:20, 10 November 2011 (UTC)

A mistake. Alarbus (talk) 03:17, 11 November 2011 (UTC)

Done. And do have a look at the un-reverted group4 code; I was unsure about the Malta bits. Alarbus (talk) 14:34, 10 November 2011 (UTC)

I've added listclass param pass-through to {{Military navigation}} & {{Campaign}} -- WOSlinker (talk) 19:09, 10 November 2011 (UTC)

Thanks (and re Europe topic). I'll give those a try. Anyone seeing what this was about? Alarbus (talk) 03:17, 11 November 2011 (UTC)

Here is another instance of the listclass parameter causing incorrect display: Diff of Template:Noticeboard links. The problem is not discernible in my browser but we need to find out what's going on. --Dianna (talk) 05:21, 11 November 2011 (UTC)

The diff I gave did not involve listclass or bodyclass, just flat list. And Djmaschek has replied to me, said two machines. Bad Browser, I expect; they've been retarding the internet forever.

• To Hell With Bad Browsers

Alarbus (talk) 05:37, 11 November 2011 (UTC)

Bodyclass is actually a little cheaper on resources (post-expand include size and template argument size); I did a comparison using the big template {{Universe navboxes}}. Jayron32 changed the template in the above diff to bodyclass, so perhaps bodyclass is the way to go --Dianna (talk) 05:52, 11 November 2011 (UTC)

I'm wondering if just having all navboxes be of class hlist out-of-the-box would be the best option. If any specific template is not using */# lists, the class will simply have no effect. Alarbus (talk) 06:15, 11 November 2011 (UTC)

Deindent: We discussed that above, and the reason why that's not the case is, at the least Template:Navbox with columns... --Izno (talk) 09:50, 11 November 2011 (UTC)

Also, the advantage of a parameter is that its then possible to see what has been converted and what has not with the use of a tracking category. -- WOSlinker (talk) 09:57, 11 November 2011 (UTC)

Inzo; you really want ordinary bulleted lists in nav w/cols? I suppose that one could be left requiring a class be passed (not keen on an oddity, though). My thinking was that making it the default would streamline millions of navboxes and reduce the template-parsing burden. I read about the ketamine issue.

WOSlinker; the class-parms are a parsing burden, too. My understanding is that the endless {dot} templates are a page-generation-time and page-size-limiting issue; the templates like {nowrap begin/end}, too. {flatlist} was less of a burden, but less-yet would be better-yet. Would not more code in {navbox} to generate a tracking category similarly be prohibitively expensive? (and if not, let's have it.)

Anyway, a few people are still seeing width issues and that needs better understanding. Night w did something to {Europe topic}, again (and some others), which I'll peek at in a moment. Alarbus (talk) 10:21, 11 November 2011 (UTC)

Can you document this properly in the template documentation please? --Joy [shallot] (talk) 11:31, 11 November 2011 (UTC)

Wrapping issues

The wrapping issues noted by Jayron32 and others are due to IE's "Compatibility" view (irony intended). The reason why bodyclass seemed unaffected is because of a (now fixed) CSS coding mistake. At the moment, {{flatlist}}, bodyclass and listclass in navboxes now all produce the same broken wrapping behaviour in Compatibility view. There is only one solution: turn off Compatibility view for Wikipedia. — Edokter (talk) — 12:09, 11 November 2011 (UTC)

I can't turn off compatability mode. Websites that I use whilst editing don't display properly. Nightw 13:29, 11 November 2011 (UTC)

Do you have examples? We can't fix compatibility view issues, but perhaps we can fix issues in standards view. — Edokter (talk) — 13:40, 11 November 2011 (UTC)

Examples of websites? If you can't fix compatibility view issues, I don't see how it matters. Surely this creates an accessibility problem? If you've got multiple editors saying they now can't see things properly, there are going to be lots of readers who see the same problem but won't know how to fix it. This needs to be brought up at WT:ACCESS to determine if this is indeed an improvement. Nightw 14:14, 11 November 2011 (UTC)

This originated with those folks. Alarbus (talk) 14:24, 11 November 2011 (UTC)

I see Rexx. I don't see any of the other access gurus. As seen, it's having an immediate impact on accessibility. I'm saying it needs the consensus of the wider community to determine how this is going to affect casual readers. Nightw 14:35, 11 November 2011 (UTC)

And see User:Pigsonthewing, above, at: #Semantic and accesssible list markup, and elsewhere on this page. Alarbus (talk) 14:43, 11 November 2011 (UTC)

I see that. That's two then. Nightw 14:48, 11 November 2011 (UTC)

Re: Flatlists: as I've said before, as a screen reader user, I think that semantically valid HTML lists are nice to have, but not a high priority ... especially if they break the look of a page for people using a very common browser. But some people disagree with me, naturally. Re: Compatibility mode, Sometimes IE8 accesses that mode automatically on certain Wikipedia pages, unless users change the default settings. Graham87 14:53, 11 November 2011 (UTC)

Good semantic structure is helpful for more than screen reader users; web spiders, for example. The list format in the editbox is far more accessible for ordinary editors, too; far easier to read, to maintain. There's also a huge performance cost to all these {dot} templates; see Talk:Ketamine#Too many templates!. Without the {dot} templates and the {nowrap} stuff, pages will be generated far faster for everyone. If IE's going have these kooky modes, IE users are going to have to switch between them. Alarbus (talk) 15:14, 11 November 2011 (UTC)

IE remembers compatibility settings per website. So you can turn it of for Wikipedia while leaving it on for other websites. — Edokter (talk) — 15:00, 11 November 2011 (UTC)

Wholesale reverts

I strongly urge that we stop making these formatting changes to navboxes unless and until the IE problems are resolved. I have just come across another recently changed one at Template:Spaceflight_lists_and_timelines, which I have reverted. Not only are the bullets messed up and ugly, the line-wrapping doesn't work, with the result that the navbox appears enormously wide. It truly is a terrible mess, and unacceptable unless there has been a high-level decision that we are deliberately not properly supporting whichever versions of IE are affected. 86.176.212.32 (talk) 00:55, 12 November 2011 (UTC) (BTW, I can't relate to the above mentions of turning off IE compatability view. AFAIK, IE displays a "broken page" icon when in compatibility view. I do not see this when in Wikipedia, and I have no other indication that IE is in compatibility view, or any known way to turn it off if it is.) 86.176.212.32 (talk) 01:05, 12 November 2011 (UTC)

The button looks like a ripped piece of paper

The button to turn compatibility mode on or off is located in the browser bar, right next to where you enter urls. It is there all the time in versions 8 and 9, independent of whatever website you might be viewing. Here is a picture of what it looks like :) What version of Internet Explorer are you using? --Dianna (talk) 02:47, 12 November 2011 (UTC)

In IE9, it is Tools → Compatibility view and uses the same icon. {{Spaceflight lists and timelines}} looks fine in standard mode, with no wrapping; in compatibility view, the template itself does not resize when the browser width is changed, although the documentation does resize. ---— Gadget850 (Ed) ^talk 03:18, 12 November 2011 (UTC)

"until the IE problems are resolved"- I think you need to address your comments in that regard at Microsoft. Andy Mabbett (Pigsonthewing); Andy's talk; Andy's edits 16:06, 12 November 2011 (UTC)

Wide boxes

An editor comment to me that he's seeing {{campaign}}-boxes widen when [show]n, when in IE's do-it-wrong-mode (my term). Seems to me that their old-school mode might be getting the recent white-space: nowrap; tweak inadvertently applied to the ul/ol elements. If so, something like:

.hlist ol,
.hlist ul
{
 margin: 0 !important;
 white-space: normal; // for old-ie-modes?
}

might help. Might help to use !important, too. Alarbus (talk) 05:01, 12 November 2011 (UTC)

Unfortunately, that does not help. IE still overrides it with nowrap for the list items. — Edokter (talk) — 09:34, 12 November 2011 (UTC)

The items are what we want not-wrapping. A few people are reporting extreme widening and I'm thinking that somehow means IE is wrongly applying the nowrap to the UL the LIs are contained in. Do you know what element is forcing things wide? Hit it with a rock specific rule. It could be another layer up; doesn't navbox fill the list-table-cell with a div&&padding? It could be that. One fellow said two-screens-wide, which would mean the nowrap was applied to a long list of items, putting them all on one line. That points at nowrap being applied to the UL or something further up. Alarbus (talk) 10:06, 12 November 2011 (UTC)

This is the rule as it currently is:

.navbox .hlist li {
    white-space: nowrap;
}

As you can see, only LI is targeted. It is only IE's uncompatibility mode (my name) that refuses to adhere to it. There is nothing upstream that would cause the entire list to not wrap. I could remove the line, which means going back to using the inline dot/nowrap templates, which do not play well with lists. — Edokter (talk) — 15:06, 12 November 2011 (UTC)

I'd read the css; it's not targeting the ul/ol, but who knows what a buggy browser might do. The {dot} templates and {nowrap} are horrid in many ways; accessibility, but also their huge preprocessing costs.

Seen the thread below about Night w reverting a lot of templates? Alarbus (talk) 15:13, 12 November 2011 (UTC)

Here's a screenshot if it helps. Nightw 16:05, 12 November 2011 (UTC)

Ouch; that's enough to make most people toggle the 'broken page' toolbar icon. Alarbus (talk) 16:22, 12 November 2011 (UTC)

Flatlist and browsers

Could I request that when editors and readers come forward with complaints about flatlist, that certain editors stop telling them to change their internet browser or switch to compatibility mode? This is the least helpful response possible, and is incredibly patronising - trying to switch the blame for the fault to the reader is not really fair. Whatever people's opinions of IE, it is the most widely used browser in the world, and the solution should be to make it work with IE. Number 57 11:29, 12 November 2011 (UTC)

Fact is, IE is the least capable browser. The problem is its deficiencies. It works as long as you don't use the "compatibility mode". Alarbus (talk) 11:43, 12 November 2011 (UTC)

IE is the leading browser used by our readers at 34%. Firefox is a close second at 23%. Wikimedia Traffic Analysis Report - Browsers ---— Gadget850 (Ed) ^talk 11:49, 12 November 2011 (UTC)

That sounds about right. Doesn't make it a good browser. It's not too much to ask that IE users use its standards mode. Alarbus (talk) (using Chrome) 11:55, 12 November 2011 (UTC)

Why should readers be asked to do anything? They should be presented with something that works. Number 57 12:42, 12 November 2011 (UTC)

Yes, they should be presented with the best work Wikipedia can present; HTML5, CSS3, JQuery. We should force their deficient browser into standards mode. I've made suggestions on how to fix this. Alarbus (talk) (using Chrome (15.0.874.120) 13:14, 12 November 2011 (UTC)

p.s. I use all the modern browsers. Alarbus (talk) 13:14, 12 November 2011 (UTC)

Could I ask that you don't use buggy software as an excuse for presenting our readers with sub-optimal markup? And while we're at it why is your sig full of deprecated markup? Andy Mabbett (Pigsonthewing); Andy's talk; Andy's edits 16:01, 12 November 2011 (UTC)

Whatever one's opinion of IE is, the fact remains that it is widely used by readers—whether it's 34% or 10%, that's alot of readers. While you're busy telling everyone that comes here what the problem is and where the button is to fix it, please realise that for everyone that comes here there are probably a hundred casual readers out there that will not know what's causing the problem. No, readers should not be asked to do anything, but that's not the main issue here. It might be if readers were being made aware of what was causing the problem, but most of them will never know and the problem will remain. Until an appropriate discussion is had over the affects of this change and an adequate consensus is achieved, I'm reverting the changes on the templates that I watchlist. Nightw 13:15, 12 November 2011 (UTC)

Looks like you're being very disruptive, to me. There's a lot of talk about on this. Alarbus (talk) 13:26, 12 November 2011 (UTC)

But no consensus. As is quite obvious from the numerous complaints in the last two days alone, these changes are having an immediate affect on accessibility throughout the project. Nightw 13:42, 12 November 2011 (UTC)

Someone will revert you soon enough; this one may even be vandalism. Alarbus (talk) 13:47, 12 November 2011 (UTC)

Not that I normally take accusations of vandalism from newly-registered users seriously, but I'm not the one whose talk page is full of cluebot reports. Nightw 05:52, 13 November 2011 (UTC)

Thanks for reminding me to review that one, again. The single CluelessBot report is for this. I reverted the bot, of course. Are you done being disruptive? Alarbus (talk) 06:27, 13 November 2011 (UTC)

• Wikipedia:Manual of Style/Accessibility#Horizontal lists
• Wikipedia:Manual of Style/Military history#Campaignboxes

Alarbus (talk) 14:03, 12 November 2011 (UTC)

You appear to have a different understanding of "accessibility" to that used by most other people. {{Flatlist}} and .hlist improve accessibility. Andy Mabbett (Pigsonthewing); Andy's talk; Andy's edits 16:01, 12 November 2011 (UTC)

This is not a matter about consensus; this is about using available markup language. To be clear: There is nothing inherently wrong with Internet Explorer. All the markup being used here is compatible with IE8 and up. The .hlist class is working on IE right out of the box. It is IE's compatibility mode that is faulty. And that is not only the case with .hlist, but a lot of other stuff. I strive for maximum compatibility with all browsers; that included IE. However, if users decide, for whatever reason, to enable compatibility mode, which is not in any way necessary for Wikipedia, then it is justified to ask those people to disable it. We can account for practically every browsers out there, but not for every quircks mode that Microsft decides to throw at as; that is practically a black box we cannot cater to. Wikipedia is a standards-complient site, and it should be viewed with a standards-complient browser. That includes IE8, in standards mode. "Compatibility mode" is not the same as "compatible with everything", it actualy means "compatible with our own, old, obsolete and buggy browsers". Sadly, too many people make that mistake. — Edokter (talk) — 15:20, 12 November 2011 (UTC)

"...then it is justified to ask those people to disable it" → But how are you going to ask them? As you've seen, it's had an immediate response from editors just from the ones that you've already converted. Obviously there's going to be a whole lot of casual readers out there seeing the same problem and they won't have any idea how to fix it. I appreciate you and Joy showing us what's causing the problem, but there are obviously going to be a lot of readers out there who won't get that service. So this becomes an accessibility issue. And, other than readers using a screen reader no longer hearing "dot" after each link, I'm not seeing how it's an improvement over the previous markup. That's clearly something the community should determine. Nightw 15:54, 12 November 2011 (UTC)

"other than readers using a screen reader no longer hearing "dot" after each link, I'm not seeing how it's an improvement" - but apart from that, what have the Romans ever done for us..? Andy Mabbett (Pigsonthewing); Andy's talk; Andy's edits 16:01, 12 November 2011 (UTC)

I'm in the process of creating a hack that will force IE6&7 into submission. That means disables the no-wrap, which is not a vital point anyway. — Edokter (talk) — 16:05, 12 November 2011 (UTC)

Excellent, thank you. Andy Mabbett (Pigsonthewing); Andy's talk; Andy's edits 16:49, 12 November 2011 (UTC)

Maybe it's a big deal for some, Andy—I don't know. Graham said it wasn't a high priority, but some obviously might disagree with that. Either way, clearly we need to consider all our audiences and determine our priorities. Nightw 16:24, 12 November 2011 (UTC)

Well, I'd prioritise web standards, accessibility, semantic markup and improved performance, over pixel-perfect rendition in obsolete and buggy browsers. As someone just said on my talk page, users of such browsers still get the content, which is what Wikipedia is about. Andy Mabbett (Pigsonthewing); Andy's talk; Andy's edits 16:49, 12 November 2011 (UTC)

This discussion can be closed. A fairly (in hindsight) simple CSS hack took care of the wrapping issue, as well as the misalligned dots. Only downside is that individual horizontal list items in navboxes are no longer no-wrapped [in IE6 and 7]. — Edokter (talk) — 17:01, 12 November 2011 (UTC)

Looks good; the wrap is only gone for those other browsers, though. Alarbus (talk) 17:10, 12 November 2011 (UTC)

That's what I meant. — Edokter (talk) — 17:38, 12 November 2011 (UTC)

I am seeing a few missing dots in IE8, but no serious issues. I am going to re-install the new versions on the templates that Nightw reverted. --Dianna (talk) 17:50, 12 November 2011 (UTC)

Looks good Edokter; thanks for the hard work to figure it all out! --CapitalR (talk) 22:53, 12 November 2011 (UTC)

Looks perfect! Many thanks Edokter. Sorry if I made a scene... Nightw 05:22, 13 November 2011 (UTC)

hlist middot does not scale

I've no idea if this is the right place to ask this question, please advise if not.

The middot is implemented using , i.e. File:Middot.png. But, on my screen this picture is significantly uglier than  • , i.e. {{•}}, or  · , i.e. {{·}}, because a PNG is not a vector image that can scale to e.g. 18px. To reproduce in Firefox, press Ctrl + a few times.

Can this be fixed? Use SVG, or even simply the characters • or ·? --Joy [shallot] (talk) 10:59, 12 November 2011 (UTC)

It's an image, a: to get it out of the actual content, and b: because that's needed to position it; it's on the right-end of list items. The browsers I use all scale it up fine (including FF). I'd not be fussed over shifting to a slightly large base image. One of the main reasons for doing all this is to cut the huge preprocessing load all the {dot} template entail. Alarbus (talk) 11:09, 12 November 2011 (UTC)

To add, it's actually a background image which cannot be scaled, and background images not work with SVG images. And we can't use • because adding text requires CSS that is not compatible with older browsers. — Edokter (talk) — 18:12, 12 November 2011 (UTC)

Firefox has an option to "Zoom text only"; if that option is enabled, images (including Middot.png) don't scale with text. That strikes me as a significant problem with this particular hack. Powers ^T 03:47, 23 November 2011 (UTC)

Moot, as not using images anymore. Alarbus (talk) 03:52, 23 November 2011 (UTC)

Oh, so it was replaced after all? I see now that http://bits.wikimedia.org/en.wikipedia.org/load.php?debug=false&lang=en&modules=site&only=styles&skin=vector&* contains

   content: " ·";
   font-weight: bold;

Where exactly is the source for this, is it editable through mediawiki? --Joy [shallot] (talk) 12:50, 23 November 2011 (UTC)

It's in MediaWiki:Common.css. — Edokter (talk) — 13:11, 23 November 2011 (UTC)

Ah, so there it is. Earlier you said • wasn't usable... but · is? --Joy [shallot] (talk) 13:47, 23 November 2011 (UTC)

A • (bullet) is too big, a · (middot) is too small, but a bolded middot (·) is what has been used all along. I just hadn't figured out how to make it bold yet. — Edokter (talk) — 14:00, 23 November 2011 (UTC)

Space between brackets

So one of the hlist conversions I did was reverted because using the second level to replace brackets "appears to add extra spaces around brackets". Additionally, I've also noticed that the brackets can wrap separately from the items they're supposed to contain, which looks odd and potentially confusing. Is it possible to fix these issues? Reach Out to the Truth 04:15, 1 December 2011 (UTC)

Known issues. Unfortunately, they cannot be fixed. The space is actually considered a bonus to denote sub-lists. But the wrapping issue is due to limitations in CSS. — Edokter (talk) — 10:59, 1 December 2011 (UTC)

heading cells

The pseudo-headings "Genus" and "Species" in {{Storks}} are not marked up as heading cells. Is there away to do so, in {{Navbox}}? If not, is there a work-around? Andy Mabbett (Pigsonthewing); Talk to Andy; Andy's edits 12:24, 6 December 2011 (UTC)

All navbox group cells are currently not headers; something that may have to be fixed. I was also thinking about having the option to put in native headers between the rows, just like {{infobox}} (e.g. header1= ... header20=), to avoid having to hack pseudo headers like this. — Edokter (talk) — 13:30, 6 December 2011 (UTC)

Not to derail your idea, which sounds fine, but that Doctor Who box could use an above on a subgroup. Alarbus (talk) 13:57, 6 December 2011 (UTC)

(edit conflict)(what-he-said) Hi. First off, none of the groups are being generated as th-elements, which is not good; should change. I just hlist'd storks and used a list in the title, too. This has caused a few anomalies. There's a span w/font-size: 110% in {title} that usually wraps everything, but the span is now being generated with a premature close after the first link rather than wrapping the while list structure; it's being generated within the first LI. I saw this earlier in Municipalities of Madeira; here it is wrapping the flag. Switching to a div might be an easy solution to this. I've also noticed that we're getting a line-height: 1.5em from the ambient list-styling when we might-well be better served by either specifying it locally or using inherit as was done with margins on {{plainlist}} (wasn't that where?).

The pseudo-header 'Species' is dodgy; you really think it should be a header as opposed to an ordinary cell with a single-item list? It could be cool to have a mechanism to specify this, although I expect it runs deep to implement. Alarbus (talk) 13:42, 6 December 2011 (UTC)

Not really sure myself if it's a good idea to have lists in the Navbox titles. Another option there could be to go with a • or · (&bull; or &middot;). -- WOSlinker (talk) 14:38, 6 December 2011 (UTC)

(ec) The title span is indeed causing Tidy to mess things up (again, just as above and below did). I made the title a div in the sandbox. The line-height in hlist is there to prevent any rows in navbox from becoming to narrow. It is also tuned per skin. As for the Dcotor Who box, a subgroup is not the best solution either, as the header turns too light (and is not quite logical without a real group preceding it). — Edokter (talk) — 14:40, 6 December 2011 (UTC)

I though the line-height was from further up; I'll have to have another look. The div would make the 110% then wrap the whole UL structure, right? As for Doctor Who, maybe you want 'above' twice; it's not really at the same level as the whole box title. I liked not having any colour in there, just getting whatever from the main template. Alarbus (talk) 14:51, 6 December 2011 (UTC) (ec, again, I know it;)

(ec) It seems apt, to me; same rationale as elsewhere. The stork one especially; the others mostly involved flags. I did a batch in Peru where it was a link to Peru being given after a region or something. Previously is there was a pipe "|" being used. (I know "comma"). Anyway, with a few tweaks it should be able to work fine without the font and heigh issues I mentioned. I'll pause doing it. Alarbus (talk) 14:51, 6 December 2011 (UTC)

OK, in the sandbox, the group cells are now table headers and the title is now a div instead of a span. Please double-check if there is any breakage I missed, before I make it live. — Edokter (talk) — 16:18, 6 December 2011 (UTC)

I previewed and inspected stork and Madeira, and the div works; wraps the UL; sizes right. But I also did Doctor Who and another and am seeing an odd increase in the titlebar height; extra space along the bottom, about 4px. Not sure what this is, but I've seen off by 4px on the bottoms of divs before. In good browsers, too; Chrome and Firefox: same. I'm tired and have to call it for now. So I'd say go slow, the issues out there now are minor and will keep a day. I'll look again tomorrow. Oh, the TH was fine in all cases. Still wondering a bit about where the line-hight is coming from, but didn't look at that; did fuss with the idea that the div needed display:inline, but it didn't seem to matter. Thanks. Alarbus (talk) 16:55, 6 December 2011 (UTC)

I can't see any increase in titlebar height in either IE, Chrome or Firefox. — Edokter (talk) — 17:59, 6 December 2011 (UTC)

File:Navbox titlebar height issue screencap-alarbus-chrome.png

This is what I'm seeing, now; that was captured in Chrome, but Firefox looked pretty much the same. The difference is 2px; I have may have been zoomed before. It now has the 110% span wrapping all LI in {Storks}, which I don't recall seeing. There are multiple spans in there now. On {Madeira} the span is only on the flag's LI. Other things I'm noticing are the [collapse], which is nice. I'm also seeing the sublist-generated closing ")" as bolder than its mate, so maybe a rule needs a tweak. Alarbus (talk) 02:52, 7 December 2011 (UTC)

You do have a sharp eye; I did see a one pixel difference when zoomed. This was due to the padding in hlist, not the header font size. I disabled the padding in headers; it is only applied in data (list) cells now. — Edokter (talk) — 11:41, 7 December 2011 (UTC)

Thank you. I'll clear everything and have a look around. I'm going to del-tag that image as I'm not sure it's a valid license. Will report back anything I find tomorrow. Alarbus (talk) 13:13, 7 December 2011 (UTC)

one more thing; the new group-THs should have a scope="row" attribute and the others scope="col". Alarbus (talk) 17:24, 6 December 2011 (UTC)

In the Stork example, the "Genus" cell should have scope="col" (not "row"); as should any cell in a row of headings. Andy Mabbett (Pigsonthewing); Talk to Andy; Andy's edits 20:20, 6 December 2011 (UTC)

Not possible within the scope of navbox. That simply falls outside its design specs. — Edokter (talk) — 23:36, 6 December 2011 (UTC)

the example I provided above shows it's being used in this way; I doubt it's the only such occurrence. How do you propose that we resolve this? Andy Mabbett (Pigsonthewing); Talk to Andy; Andy's edits 22:38, 7 December 2011 (UTC)

Navbox does not posess the concept of column headers, only row headers. Perhaps {{navbox with columns}} provides a better platform if column headers are really needed. — Edokter (talk) — 23:08, 7 December 2011 (UTC)

considering that navbox with columns is a frontend to navbox, that would require a serious rewrite. Frietjes (talk) 23:13, 7 December 2011 (UTC)

Navbox-with-columns uses navbox merely as a wrapper. The template only uses list1 and builds a table inside it that contains all the column logic. — Edokter (talk) — 23:24, 7 December 2011 (UTC)

Whoever did that in {storks} deviated from proper use of {navbox}. The solution is to not do that. They did so visually, not by following the design. Forgive them for they know not what they do. Alarbus (talk) 06:46, 8 December 2011 (UTC)

Again: this is probably not the only example. How would you achieve the obviously-desired, an not unreasonable, outcome? Andy Mabbett (Pigsonthewing); Talk to Andy; Andy's edits 22:35, 8 December 2011 (UTC)

While one might be able to do something more meaningful by nesting the {navbox with columns} in a {navbox} with some child/subgroups or... something more, what they really need is a {{Taxonavbox}} of their very own. Better they rethink their approach and do something that works for them and also fits the tools at hand.

We've got other issues to work through, like the habit people have of sticking loose plaintext labels into navbox list items. Alarbus (talk) 03:59, 9 December 2011 (UTC)

I doubt that this is specific to taxonomic articles; it could be motorcar manufacturers and their models; football team managers and trophies won, or many other such sets. Andy Mabbett (Pigsonthewing); Talk to Andy; Andy's edits 23:13, 9 December 2011 (UTC)

Not really; groups per se apply to the lists that go with them (i.e. are row headers); it's just that this box has more relationships between elements than navbox has in mind. You could probably explicitly specify the scope as col; would have to be 'last' re the embedded one. Alarbus (talk) 02:52, 7 December 2011 (UTC)

Thank you for your quick work on this. Pressure of time means I may not be able to participate in further discussion and testing until the weekend. Andy Mabbett (Pigsonthewing); Talk to Andy; Andy's edits 20:20, 6 December 2011 (UTC)

Navbar/sandbox

Last edit should be undone (or corrected). Its include {{#if:{{{name|}}}|{{Navbar/sandbox|{{{name}}} which means a lot of page now includes Template:Navbar/sandbox. Christian75 (talk) 12:37, 7 December 2011 (UTC)

Fixed. — Edokter (talk) — 12:47, 7 December 2011 (UTC)

One dot too many

Not a huge issue, but horizontal lists (not sure if that is the cause) are rendering one dot too many. That is I see:

list-item · list-item · list-item · 

And the last one looks (and is) out of place. I have corrected it in a template but it got reversed for being deprecated. Fine by me, I am all for usability, but it would help avoid more of theses cases if the current version looked correct, which it does not. Using: Opera 10.10 - Nabla (talk) 16:50, 8 December 2011 (UTC)

I don't know what the current version of Opera is, but in other (modern) browsers, the last dot is removed using the :last-child selector, something Opera 10.10 may not understand. I'd like to know which version (if any) started supporting it, then I can fix it by having javascript remove the dot (as already happens in IE6/7). I've seen older versions of Safari lacking support as well, a webkit version would also help. — Edokter (talk) — 18:39, 8 December 2011 (UTC)

According to Quirksmode, Opera 10.10 should support :last-child. Can anyone confirm? — Edokter (talk) — 21:38, 8 December 2011 (UTC)

It would be interesting if Nabla tried the CSS3 Selectors Test and gave us the results. ---— Gadget850 (Ed) ^talk 16:48, 9 December 2011 (UTC)

And it looks like Chrome 10 has a bug here: [2] [3] ---— Gadget850 (Ed) ^talk 16:52, 9 December 2011 (UTC)

@Gadget850: Not sure if what asked for but: «From the 41 selectors 41 have passed, 0 are buggy and 0 are unsupported (Passed 574 out of 574 tests)» There is also a bunch of pages (or sections) about each selector. Most have a grey rectangle with a green stripe on the top. There is one at :last-child with two stripes, one being red; not sure if that is 'bad', but is in an example with:

div :last-child {
}

<div> 
   <div></div>
   How about regular text...
</div>

Opera 10.10 is a year or maybe two years old. It goes 11.60 or whatever currently. Do not bother much trying to fix it if it is corrected in recent versions (and don't even think in *telling* me to change to *firefox* - or I'll insult you :-) - or to update - that I will, one of these years :-) no need to rush - Nabla (talk) 22:59, 9 December 2011 (UTC)

Oh! It is a good thing making things look nice and working. Great. But it is also a good thing to keep it simple and not overloading both people and browsers with layers of fixes of fixes of fixes (repetition intentional) that cost resources. - Nabla (talk) 23:04, 9 December 2011 (UTC)

Your browser passes the test; one bar on the last-child: test page is supposed to be red. And my fixes are always from the ground up, not layered. Just a curious example, perhaps Opera 10.10 mixes up CSS priorities. But I'm not fixing this one... — Edokter (talk) — 23:11, 9 December 2011 (UTC)

Fine by me. Please don't take me wrong, but if the browser is OK, but the display is not, what is not OK then? Please, keep things simple. Being up-to-date with all of the latest is not necessarily good. And good work. - Nabla (talk) 11:37, 11 December 2011 (UTC)

Howto get even/odd row style in {{navbox with columns}}?

{{navbox with columns}} is used in {{CJK ideographs in Unicode}}. Is there an easy way to introduce even/odd line backgrounding? A regular navbox does so automatically (transparent/light grey). -DePiep (talk) 15:03, 9 December 2011 (UTC)

The only way I see how to do it easily is to nest a Navbox within a Navbox with columns. — Edokter (talk) — 15:10, 9 December 2011 (UTC)

Another hlist construct to consider

Some navboxes have this item of thing:

Which is the "best" way to do it. Version A or Version B? Or should they be re-written as Version C or Version D? I suppose sometimes it's going to depend on the situation -- WOSlinker (talk) 14:32, 10 December 2011 (UTC)

I would favor version D, as that is what groups are for. Or as an alternative, use defenition lists instead:

— Edokter (talk) — 15:02, 10 December 2011 (UTC)

┌────────────────────────────────────────────────────────────────────────────────────────────────────┘ Any construct like:

* '''South:'''
* Car
* Bus

is incorrect, because "south:" is not a member of the list which includes "car" and "bus", but a descriptor of such items. Andy Mabbett (Pigsonthewing); Talk to Andy; Andy's edits 16:34, 10 December 2011 (UTC)

I've see a lot of this and the solution does vary, and in some cases I've not been particularly please with any of the currently available mechanisms. I've mentioned this issue several time, most recently on Andy's page. The best option is often adding another level of groups, but I believe people have opted for this light-weight inline form to avoid that. Typically I've seen this used instead of a third or deeper level. They want an inline form and we don't have one for these situations. I believe some form of definition list is the right structure. I'd not considered 'C', above, and believe it can be done with DL, too, but have not yet tried it. It's a change of look, and people push-back over that. A lot. I have used the non-sublisted 'E' form, too; it works sometimes.

As I said somewhere earlier, I see navbox and such eventually becoming DL structures from the top down at some point. Mobile viewing will force a move away from the inherent column structure that goes with using tables (inappropriately). Alarbus (talk) 04:29, 11 December 2011 (UTC)

The structural issue at hand is not limited to navboxes. See British people, specifically the caption under the image in the infobox (it's {{tl|32 Britons). This is 32 names in four rows and they have little labels; 1st, 2nd... This practise of labelling rows with an inline prefix is very common and needs support. Structurally, the closet we've got in DT/DD but this forces bold and a "·". Nested lists force brackets. Making the label a discrete list-item can achieve the 'look' but is semantically poor as a label is not part of the list. Please consider this, and offer some ideas. Alarbus (talk) 12:34, 16 December 2011 (UTC)

What it comes down to is that hlist is just as limited as regular lists when it comes to list headings. What I can do is have a DT trailing a ":" instead of a dot. — Edokter (talk) — 12:47, 16 December 2011 (UTC)

I'd be game for trying that. See {{The Holocaust}} where I've just used DTs followed by nowiki'd ":" which are getting a "·" after them (this is under 'camps'). The explicit ":" would be cut of course. I believe this is the only place I've done this, and don't think switching to a generated colon would mess much up out there. Also, there's something odd in that ({{Sidebar with collapsible lists}} re class=nowraplinks; a few of the generated dots are wrapping... varies with font metrics. Alarbus (talk) 13:31, 16 December 2011 (UTC)

Thanks. That part's much improved. This sidebar is full of disparate cases; others we probably don't want inline. I do understand that this is a complex mess. I see it as a result of years of stuff being hauled off in all sorts of anyone-can-edit directions. Alarbus (talk) 01:23, 17 December 2011 (UTC)

┌────────────────────────────────────────────────────────────────────────────────────────────────────┘ That's OK visally, but te rendered HTML (values abbreviated for readability) is:

<code>
<dl>
<dt><a href="..." title="...">Nazi Germany</a></dt>
</dl>
<dl>
<dt><i>People</i></dt>
</dl>
<ul>
<li><a href="..." title="...">Major Perpetrators</a></li>
<li><a href="..." title="...">Adolf Hitler</a></li>
[...]
</ul>
</code>

and that's not so good. I think we should write the optimal HTML markup, then decide how best to render it in wiki-markup; not vice-versa. In this case, or example, "Nazi Germany" should probably be a header table-cell. Andy Mabbett (Pigsonthewing); Talk to Andy; Andy's edits 15:04, 16 December 2011 (UTC)

I know that structure is not ideal, I've just been trying to move things forward using the tools at hand. I've never looked at a {{sidebar with collapsible lists}} before and am not sure if further template structure might be nested in there (or if that would be well received). The various collapsible lists in there contain many varied structures. Some of the DLs would be best rendered inline (such as Belgium et al. under "camps") while other ("Nazi Germany") might be better as centred blocks (or TH if there's a way). ANyway, I've updated it to use more ':'. Not ideal, but a step closer. Alarbus (talk) 01:23, 17 December 2011 (UTC)

I don't know much about the <dl> html tag and its children, but here's a proposal for how the HTML might ideally look.

<code>
<dl>
   <dt><a href="..." title="...">Nazi Germany</a></dt>
   <dd><ul>
      <li><dl>
         <dt><i>People</i></dt>
         <dd><ul>
            <li><a href="..." title="...">Major Perpetrators</a></li>
            <li><a href="..." title="...">Adolf Hitler</a></li>
            [...]
         </ul></dd>
      </dl></li>
      
      <li><dl>
         <dt><i>Organizations</i></dt>
         <dd><ul>
            <li><a href="..." title="...">Nazi Party</a></li>
            <li><a href="..." title="...">Schutzstaffel (SS)</a></li>
            [...]
         </ul></dd>
      </dl></li>
   </ul></dd>
</dl>
</code>

This particular example has lists being nested in each other (the "People" and "Organization" lists inside of the parent "Nazi Germany" list), which makes it slightly more complicated than typical uses cases. --CapitalR (talk) 18:33, 16 December 2011 (UTC)

You have the structure about right. Much of this is about proper nesting. Your above html should be generated from this:

Nazi Germany

• People
  • Major Perpetrators
  • Adolf Hitler
• Organizations
  • Nazi Party
  • Schutzstaffel (SS)

(ignoring the ':' initial colon-level for indenting this post)

It's a question of controlling how this wiki-text, producing your html, is rendered in the sidebar (or navbox...) to get looks pretty much along the lines of what people have been seeking for years. If we don't support most of what they want, they'll revert:

• Diff of Template:The Holocaust
• Diff of Template:The Holocaust

Do look further, as there's more in the other collapsible lists...

Alarbus (talk) 01:23, 17 December 2011 (UTC)

Who has altered the template in the last day or so?

Someone has reformatted the lefthand section headers, which were previously formatted as flush-right text within the first column of the navbox, as centered text. This obviously represents the personal preference of one editor (or perhaps a handful—I cannot locate any talk page discussion on point of the history of the edit to determine who is responsible). This alteration looks amazingly bad from the standpoint of good layout and design, and obviously affects thousands of navboxes and the work of hundreds of editors who were not consulted in making this random change to the template. Please restore the previous flush-right justification for the section headers. Thank you. Dirtlawyer1 (talk) 12:45, 12 December 2011 (UTC)

My bad. Will be fixed soon. — Edokter (talk) — 13:07, 12 December 2011 (UTC)

Alignment of groups

Over the past couple of days there has been a discussion on the alignment of groups on both my own talk page (User talk:Rangoon11#WP:Deviations) and that of WOSlinker (User talk:WOSlinker#WP:Deviations) that I can now understand is perhaps best conducted here. From what I can gather, there is no policy against right alignment of groups (and in fact Template:Navbox specifically refers to both center and right alignment:

"groupstyle* CSS styles to apply to the groupN cells. This option overrides any styles that are applied to the entire table. Examples: groupstyle = background:#nnnnnn; groupstyle = text-align:[left/center/right]; groupstyle = vertical-align:[top/middle/bottom];")

However I can recognise that there are some editors who feel that right alignment of groups is standard to such a degree that the Wikipedia:Manual of Style/Accessibility guideline applies and that therefore all non-right aligned templates should be changed.

I have nothing against consistency per se but do feel that if a single approach is going to be applied throughout that left alignment of groups would be better, as list content is almost always left-aligned and for the lists and groups to have the some alignment is both more logical and more visually attractive.

Do others have any thoughts on this?Rangoon11 (talk) 18:33, 22 December 2011 (UTC)

Here are some examples for reference:

I prefer the right-alignment, as the header cells are better associated with the content, especially in the case where there are both long and short header cells. The left alignment doesn't flow naturally and looks somewhat odd/ugly with the big gap. --CapitalR (talk) 20:51, 22 December 2011 (UTC)

Let's not forget templates with sub groups and longer headings.Rangoon11 (talk) 21:11, 22 December 2011 (UTC)

There might be a case for subgroups, but I agree with Capital on the case of simply groups. --Izno (talk) 21:30, 22 December 2011 (UTC)

I prefer the appearance of the right-aligned headers. I am also in favour of the templates being uniform project-wide, as this gives a more professional appearance befitting a world-class website. --Dianna (talk) 05:04, 23 December 2011 (UTC)

As I said on Rangoon's talk page, and I and others said on WOSlinker's talk, this is an unhelpful deviation from the templates normal behaviour and should be fixed. The off-colours on the subgroups are unwarranted/unhelpful, too. Off to fix more. Alarbus (talk) 10:35, 28 December 2011 (UTC)

Option to remove border, but keep same "level" used for colouring

Could we add an option to achieve the same format as 'border=child', but without the lighter colouring? It seems like this could be possible if there were an option to not add the 'subgroup' class when 'border=child'. I understand that this is usually a good idea, but see here for example, where Epipelagic was trying to override the lighter colours. The lighter colouring isn't usually that noticeable, but when the template is next to another one that isn't lighter, it is noticeable. When the subgroups are being used within 'navbox with collapsible groups', it's not always desirable to have this lighter colour. I also tried some other hacks for this particular case, like here, but I think we could make this much less of a hack. Thanks! Plastikspork _―Œ^(talk) 05:00, 31 January 2012 (UTC)