22 Nov 2013
posted in daily
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
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
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
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-row isn't required) the text becomes selectable again.
Checkout the following pages in IE (<11) for a demo:
display:table element with no
display:table-cell elements behaves strangely, preventing text selection.
Previous: Make a bootable Mavericks install disk
Next: ASOBI jeux d’adultes