Here are the results of a recent Twitter poll by Lea Verou, gauging how many developers still test they layouts in IE8. The results are quite astounding.
OK, not CSS stuff, but if you want some light entertainment, check out What Rhymes with Hug Me?, or if you need something more intellectual, check out this awesome Bohemian Gravity video explaining string theory—to some familiar chords of Queen:
Take a look at any or all of the links above and tell us what you think! And feel free to PM me if you have an great links for the next issue. :)
Note that even for the top and bottom margins the percentage value will refer to the width of the containing block.
If the containing block’s width depends on the element to which percentage margins are applied, the resulting layout is undefined in CSS2.1. More verbosely this would be apparent for floated or absolutely positioned elements without an explicit width set, where a child element has margin expressed as a percentage. The parent element needs to know the dimensions of the child element to compute its own width (shrink-wrapping the contents), but the child box element also needs to know the parent's width to compute its margin (and hence its dimensions).
The IE specific bugs that you noticed are then listed underneath.
A neat trick with vertical percentage margins is that you can create perfectly square boxes (if you wanted - perhaps for a series of background images).
You need the webkit prefix in the -webkit rules:
That should rotate in webkit now :)
Thanks, I forgot them. Updated! :)
BTW: For me the difficulties arise, when I try to get beautiful horizontal and vertical centered text in the percentage made squares.
I really didn't expect that somebody we all know would interpret this as a question. ;)
Originally Posted by Paul O'B
You'd probably need the display:table routines with extra html.
But fabulous! :)
I tried it almost in the same way with extra html elements and display:table / display: table-cell, but the square dimensions and the percentages jumped to all sides, and mostly the opposite way as I intended! The .fl:before instead of .fl:after did the trick.
Dec 1, 2013, 19:39
I was impressed with the way this page changes when zoomed on a tablet: