IE6/7 CSS Specificity Bug

After our team launched the new College of Education site, I discovered that IE8’s handy “Browser Mode: IE7” mode of IE8 is useless for real IE7 testing (but IETester actually works!). Undoubtedly this “IE7 mode” has many quirks in its emulation we’ll never know about, but after a few hours of hair-pulling I finally pinned down a real IE6/7 bug that the emulator doesn’t have.

IE versions before 8 apparently vary in their calculation of CSS specificity depending on the order of elements in the selectors. What this means for poor suckers who worry about IE6/7 is that rules that appear later and (should) match specificity won’t always override values. E.g.

<div id="foo"><div id="bar">I should be green.</div></div>
/* both rules have the same specificity */
#foo div  { background:red   /* IE6/7 apply this value */ }
div  #bar { background:green /* correct value to apply */ }

This bug will hit you when you’re pursuing a good goal: trying to keep selectors short. So in these situations make sure to test in IETester at the very least and leave a comment to let future CSS editors know why a selector is longer than needs to be.

Honduras Might Try Charter Cities

From the Charter Cities blog:

The government in Honduras is convinced that a charter city could be the safe playing field, with new rules, where Hondurans of all backgrounds can come together and put their skills to work with the financial resources, expertise, and technology available in the rest of the world.

I first read about charter cities last June, and I still see it as an incredibly important idea. Some of the best criticism of the idea I’ve read is from Ranil Dissanayake on the Aid Thoughts blog. This quote (from here) seems to sum up his argument:

Romer’s approach is wrong not because he thinks rules are important or that countries should invite rich Governments to enforce them, but because Romer thinks he already knows the rules, and that they can be imported anywhere. That’s not how it works. In a recent post I pointed out how different rich countries are from each other. That’s partly because their rules, evolved over hundreds of years in some cases, are specific to each of their own contexts. Romer doesn’t see this. He just sees the rules of today, and imagines that they can be peeled off a society and pulled over a new one, like a one size fits all t-shirt.

Firstly, I’ve yet to read that Romer thinks he “already knows the rules”, especially down to the details. From the early mention of the Honduras experiment, it seems unlikely that Romer, the Charter Cities organization, or foreign governments will be deciding all the rules. Secondly, some rules are much more important for success. E.g., Dissanayake mentions the variance in rape law between the U.S. and France, but these differences have little influence on economic progress (Koreans once all had similar, if not identical, cultural laws and norms, but changes in those aren’t what held North Koreans back), and immigrants in both countries easily accommodate either law. There are large chunks of the “rules” that could be left up to the host country or designed around the culture of the populations most likely to migrate there.

Also I think the incentives are right for allowing cultural enclaves some variance in their social laws if it reduces ethnic tension, since this would be destructive to land value (reducing the rents the host country can collect), to productivity (making investors unhappy), and to the credit of the organizations making the rules.

In short I think Dissanayake significantly underestimates the willingness/ability of people in poverty—and willing to move to escape it—to accept culturally different rules. I think in richer countries we’ve come to see cultural rules as so important because we can afford to.

Since I didn’t post it before, here’s the TED talk (19 min) on charter cities from 2009:

Filtering WordPress Navigation Menus

WordPress 3 introduced native navigation menus, usually created via the wp_nav_menu theme function and the built-in Custom Menu widget.  If you have a menu with a deep hierarchy, you may want to display only the active branch and the submenu directly below the active item (given class “current-menu-item” by WordPress). You can see this menu behavior on the left in the UF College of Education Faculty site.

This is sadly not doable with CSS. I originally did it with Javascript, but the requirements of progressive enhancement required that the whole menu be output before attacking the DOM. Depending on the page, this caused a distracting collapse of the menu during the layout.

The class Coewp_MenuFilter does this menu filtering server-side. Until I wrap this in a plugin, just put it in your theme folder:

// in functions.php
require dirname(__FILE__) . '/MenuFilter.php';
Coewp_MenuFilter::add();

How it works

add() attaches a filter to the “wp_nav_menu” hook, so WordPress passes menu HTML through the class’s filter() method before returning it in wp_nav_menu(). In filter(), the HTML is converted to a DOMDocument object, which is edited using DOM methods (with XPath available, this version was almost a direct port of the jQuery version). After cutting it down, the DOM tree is re-serialized to HTML.

I was really hoping this filtering could be done before the HTML was created, say by subclassing WP’s Walker_Nav_Menu class, but this proved difficult to debug.