the empty set

Display table CSS prevents IE users from selecting text

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:

  wrapper
    inner
      nav
        links
      /nav
      content
        text
      /content
    /inner
    tools
      links
    /tools
  /wrapper

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.

Ø permalink: https://davidroessli.com/logs/2013/11/display_table_prevents_ie_from_selecting_text/

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)



Previous: Make a bootable Mavericks install disk

Next: ASOBI jeux d’adultes


About

Hello, my name is David Roessli. I am a freelance web designer and developer based in Geneva, Switzerland.

This weblog is an nth attempt to solve my multiple online personalities and weblog/rss feeds burnout issues. (more)

Words

I have been contemplating the idea of upgrading my desktop Mac since this spring. The latest 27" iMac (Quad-Core) seemed the perfect candidate, but the release of Apple's 27" Monitor last September made me stick with the Mac Pro...

Music

The autopsy of an iconic album cover picked up on Kottke.org. A stacked graph of successive radio signals from pulsar CP 1919, in a 1977 astronomy encyclopedia that originated in a 1970 Ph.D. thesis. Fascinating <3...

Pictures

Check out my latest Flickr ramblings. Mostly day to day cameraphone pictures stolen here and there.


© 2000-2018 David Roessli | v4.1 | as valid xhtml and css as possible | hosted by Infomaniak | RSS feeds. Looking for my Privacy Policy ?