{"id":492,"date":"2005-06-02T23:54:08","date_gmt":"2005-06-03T06:54:08","guid":{"rendered":"http:\/\/stefangeens.com\/?p=492"},"modified":"2005-06-02T23:54:08","modified_gmt":"2005-06-03T06:54:08","slug":"roger-johansson-is-some-kind-of-genius","status":"publish","type":"post","link":"https:\/\/stefangeens.com\/2001-2013\/2005\/06\/roger-johansson-is-some-kind-of-genius\/","title":{"rendered":"Roger Johansson is some kind of genius"},"content":{"rendered":"

When redesigning the site last JanuaryAnd no, I’m still not done.<\/span><\/span>, I wanted to make sure that the marginalia to the left of the main narrative floated clear of one another. In the old design, that hadn’t been the case — each margin note was just a span of text anchored to the main text but pushed off to the left, and I had to be careful to leave plenty of room before inserting the next margin note, or they’d quite simply overwrite each other. The old design thus mashed up form and content, which I hated, but I loved the ability to add margin notes more.<\/p>\n

I had found a clever little solution that provided exactly the intended effect — a wide left margin for the main container, and then a combination of negative margins, float:left<\/code>, and clear:left<\/code> applied to the marginalia — and it worked in every major browser except for my own favorite, Safari. Sure, it would render, but links went all funny and text was no longer selectable. In short, it was unworkable, and I had to surrender to the old status quo.<\/p>\n

Until today. I was reading Roger Johansson’s Safari wishlist<\/a>, where he encounters the same problem:<\/p>\n

After a little bit of fiddling with the CSS I found that adding position:relative<\/code> to the rules for any floated elements that also have negative margins fixes the problem. It shouldn’t be necessary though, right?<\/p><\/blockquote>\n

No, Roger, it shouldn’t. Thanks to you, however, I can now write my marginalia with abandon, secure in the knowledge that should it get too verbose, my earlier scribblings will accomodate these later intrusionsUpdate: June 2 \/<\/b> Well, clearly there is now a problem with IE, but it’s way too late to figure out what all that is about. Tomorrow.<\/span><\/span>.<\/p>\n

Update: June 6<\/span> Okay, that took way more effort than is healthy, but now I’ve cobbled together some extra CSS markup just for IE that gives it the same functionality. As a test, here are three margin comments placed very close together: Margin comment 1\"escherstairs.jpg\"<\/span><\/span>, margin comment 2\"escherstairs.jpg\"<\/span><\/span> and margin comment 3\"escherstairs.jpg\"<\/span><\/span>. See how they no longer overlap in IE? It took a display:block<\/code> and some fancy margin adjustments to do the trick.<\/p>\n

If you’re using Firefox or Safari, you’ll notice how hovering over a certain margin comment now highlights it and its context in the main narrative. Discrete but useful, is the idea. This particular feature doesn’t work with IE because that browser can’t recognized the :hover<\/code> pseudo-class. None of this works for Netscape, BTW, but given my latest stats, nobody should be noticing any longer. (I’ve got a simplifed HTML\/CSS example here<\/a>, in case anyone is interested in taking this further.)<\/p>\n","protected":false},"excerpt":{"rendered":"

When redesigning the site last JanuaryAnd no, I’m still not done., I wanted to make sure that the marginalia to the left of the main narrative floated clear of one another. In the old design, that hadn’t been the case … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[8],"tags":[],"class_list":["post-492","post","type-post","status-publish","format-standard","hentry","category-science-technology"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7eNhC-7W","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/stefangeens.com\/2001-2013\/wp-json\/wp\/v2\/posts\/492","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stefangeens.com\/2001-2013\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stefangeens.com\/2001-2013\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stefangeens.com\/2001-2013\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stefangeens.com\/2001-2013\/wp-json\/wp\/v2\/comments?post=492"}],"version-history":[{"count":0,"href":"https:\/\/stefangeens.com\/2001-2013\/wp-json\/wp\/v2\/posts\/492\/revisions"}],"wp:attachment":[{"href":"https:\/\/stefangeens.com\/2001-2013\/wp-json\/wp\/v2\/media?parent=492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stefangeens.com\/2001-2013\/wp-json\/wp\/v2\/categories?post=492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stefangeens.com\/2001-2013\/wp-json\/wp\/v2\/tags?post=492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}