When WordPress 3.2 came out, I switched to the new default Twenty Eleven theme. It works well and looks great, but hopefully I will find some time someday to personalise it a bit. For now I use it almost without modifications.

I do not know a lot about either WordPress or CSS, but I discovered one little thing that seems like a bug: When viewing a single post, the meta links in the top (like the date on a post or the full-size link and post link on an attachment page) are not clickable — at least on Opera, Firefox and Chrome. It seems to work in IE.

Looking at a blog post in Opera’s Dragonfly module, we see the following.

Twenty Eleven with default settings

The #nav-single element (containing the Previous link) is highlighted and the mouse was hovering over the posting date link, 2011/07/19, although the pointer is not visible in this screenshot. Note that the date link is not underlined — it is not clickable. The highlighted #nav-single element appears to be covering the meta links on the left.

Looking at the theme’s CSS, I found two possible solutions. The #nav-single element’s z-index was set to 1. By changing it to inherit (I do it in a child theme), the navigation links no longer cover the meta links:

Twenty Eleven with z-index: inherit;

The date link now reacts to the mouse hovering over it and is clickable. The Previous link is not, however — now the situation is opposite and the navigation element is covered by the meta element.

A better solution seems to be to modify the width of the #nav-single element. Originally it is set to 100%, but by changing it to inherit, everything appears good:

Twenty Eleven with width: inherit;

The width of the #nav-single element is now limited to the internal width of its elements. Links in both the meta and navigation sections now work, and I did not notice any side effects.