Display table CSS prevents IE users from selecting text 

Tags :
Missing puzzle

While helping a client optimise his website post launch, I ran into a strange issue with IE: users of IE 7-10 couldn't select (highlight) some parts of the page (duh).

As this isn't something I check when running cross-browser tests, I missed it.

It turns out that it was linked to the use of CSS property display:table.

This property was used to change the stacking (or source) order of certain parts of the page when the viewport changes size. A set of links situated in the header on desktop width, jumps down to the footer when the screen narrows down to smartphone width.

Flexbox will take care of this one day, but in the meantime, using display:table does the trick. The idea is to set the order with display:table-header-group (aka thead) and display:table-footer-group (aka tfoot). Checkout Chris Coyier's post for a complete guide of the table element.

Consider the following source order:


By assigning display:table to the wrapper block, display:table-footer-group to the inner block and display:table-header-group to the tools block, we are able to display the tools top right on large viewports, while having at the bottom on narrow screens. Jeremy Keith presents this technique in a blog post and Brad Frost lists it as Table cell source order in his Responsive Pattern Library.

This works fine, except that we discovered that IE<11 users couldn't select text in the display:table-footer-group.

By changing display:table-footer-group to display:table-cell (display:table-row isn't required) the text becomes selectable again.

Checkout the following pages in IE (<11) for a demo:

Somehow, a display:table element with no display:table-cell elements behaves strangely, preventing text selection.

Posted a response ? — Webmention it

This site uses webmentions. If you've posted a response and need to manually notify me, you can enter the URL of your response below.

Want more ? — prev/next entries