I really should be doing other work, but I thought of a quick improvement to the Built In Blogger presentation I did at the NMC 2005 Summer Conference on “More Than Cat Diaries: Publishing With Weblogs”… the hiding and showing of slide notes (using the “+/- notes” button in the top left) displayed a CSS chunk of text by toggling its display properties. What I did not like was that the notes simply showed up at the bottom of a slide, so a full screen slide, the notes would appear out of screen, below the fold line (requiring a scroll down).

Well that was an easy fix- just change the positioning properties for the div to be absolute, so now a slide that appears like this:

Cat-Notes1

When you click the button in the top right, now the notes appear layered over the slide:

Cat-Notes2

And an extra right aligned button under the notes can make them disappear again.

Neat, eh? Just minor updates in Blogger Template, and publish, correct?

Well, yes, until you deal with the asterisked note in the slide I share how this presentation was created. Basically, this technique worked fine in web standard browsers I tested (Safari, FireFox in Mac OS X and Firefox on a PC). In Internet Explorer, almost anything wrong can happen to CSS. This tripled the time I spent getting this to finally work because:

(1) The IE box model or lack there of, made the notes div be wider than the screen. Okay, so I added a fixed width of 500px to make it stay inside the window.

(2) The notes div was made to display on top by setting a z-index:3. On standard browsers, it layered as expected (on top). In IE the div for the footer insisted on being on top. Even if I explicilty set a lower z-index for this div z-index:1 IE just does what it feels like doing. The ultimate fix was to remove the position:relative from the footer CSS class.

Anyhow, you can find details on how this magic (or kitty litter) was done at http://cat-diaries.blogspot.com/2005/06/blogger-presenter.html where details are in the notes display area and you can also grab a copy of the entire template used in this production.

How about a new IE motto… “Got way too much web design time on your hands? Let IE fill in those idle hours with thousands of unexpected CSS behaviors…” If you really want to take back your web on a PC, get Firefox. Now. Stop reading this, and get the Fox. What are you doing still staring at this screen?

The post "A Better Cat Diary" was originally pulled like taffy through a needle's eye at CogDogBlog (http://cogdogblog.com/2005/06/better-cat/) on June 23, 2005.

9 Comments