lucy24 - 2:16 am on Oct 23, 2013 (gmt 0)
Hm, interesting approach. How far back does it work reliably? That is, ahem, how many MSIE versions? It works as intended in Camino-- which presumably means any Firefox that any human will ever use-- and in SEE preview, meaning any webkit should be OK. If I had half an hour to spare I'd try it in Opera. WHY does it take so long to load up? 12 and 15 are exactly the same in this respect.
smather, it's fairly straightforward once you spend a few minutes poring over the code. The secret is that "after" doesn't have to mean physically after (i.e. to the right in an ltr language). But because it's attached to the div, "position:absolute;" means "pretend that your div is now the entire universe". So "left: 15px" means "15 pix to the left of-- i.e. inside-- the container's left edge" and similarly for everything else.
Am I missing something?
Yup, it's a trick. The ostensible content
content = " ";
is just a placeholder to force the dashed border to display; it has nothing to do with the text content of the div itself. That's why he included the IE8 blahblah in the html: to show that the div's "real" content is unaffected.
If you leave out the "content" line, the border disappears too. It may or may not work with
content = "";
I don't understand why the main div requires "position: relative" (a declaration I normally wouldn't touch with a barge pole ;)), though I see by experiment that it's essential. Well, "absolute" might work too.
Now, whether this comes out cleaner and tidier in practice than nesting divs is a whole nother issue...