Category: Internet

Joys of collapsing margins, and custom 404s

I made some minor changes to the main stylesheet today to improve the readability of the site. In keeping with some of my recent reading, I kept the changes simple and almost entirely typographical. I had already increased the leading between text lines; to break up the flow and call out the post titles a little more (which were drowning in a sea of grey), I indented the post text under the headlines by 24 pixels, also known as two ems (since the text is specified at 12 pixels). Shift-refresh any page on the site (to force the stylesheet to reload) to get the changes.

Incidentally, why pixels and not points or ems? There’s a long history of discussion on that point but it basically comes down to browser compatibility issues; IE3/Win renders ems as pixels, and points vary from browser to browser and platform to platform. There are ways to work around the problem, and someday I’ll tackle resetting everything to use them, but not today.

So, implementing 24 pixels of white space to the left of the news item text should have been simple, and it mostly was. I already had a class for the news item description, fortuitously, though I never defined any style attributes for it, and my news items were automatically wrapped in a div of that class. So it’s easy, right? Just set margin-left: 24px; and you’re good to go.

Except: margins collapse. This is a factor in the CSS box model that I keep forgetting. If you have margins in two blocks that touch each other, the margin sizes collapse to zero. CSS 2 amends this to say horizontal margins should never collapse, but IE6 collapsed the margins anyway. So, setting padding-left: 24px; solves the problem. Padding never collapses.

I’m also finding other minor problems throughout the site with the display. This time it’s in the content markup, which means it will be harder to fix. NetNewsWire correctly wraps both opening and closing <p> marks around paragraphs (though it sometimes gets overanxious and wraps them around list markup, which is technically a no-no). But Manila’s in-browser editor, by default, only places a <p> mark at the end of each paragraph, as though it were a glorified <br>. The net result is that many of my posts that were made from the browser do not have paragraph styles applied to the first paragraph of the post, since Manila doesn’t insert a paragraph mark, and the post title ends up touching the first paragraph instead of being offset by 12 pixels. The fix is simple: going forward, I’m manually inserting paragraph markup, and as I touch old entries I fix the paragraphing. But I’m not going to go through all umpty-thousand news items and fix them one by one, at least not right away. So be nice and ignore any inconsistency, won’t you?

One last thing: Based on the guidance in last week’s A List Apart, I implemented a custom 404 page on the static site that provides links back to the home page and the site map. It also customizes the message according to whether you’ve come from inside the site, from a bookmark, or from an external referrer. You will only hit it if you try to find a page where the URL starts with www, not discuss.

Most Unique Subscription Lists

Andrew Grumet: Most Unique Subscribers. Brilliant hack of the Share Your OPML SDK over at feeds.scripting.com. The basic concept, as invented by Chuck Welch in a comment on Andrew’s blog: add the number of users subscribed to each feed in your subscriber list and divide by the number of feeds in your list.

My number is 46.27 (based on the list published on the site; I need to upload a new list, since I now have 161 feeds in NetNewsWire (up 40 from when this started two weeks ago). If Dave’s new tool has done anything, it’s turned me into an RSS fiend.

One note: the more customizable feeds like the iTunes Music Store’s offerings become available, the higher everyone’s uniqueness number will rise.

Crazy workaround for three pixels

I just cleared up a funny problem that I’ve had with my site on IE6/Win ever since the redesign. Only folks who were leaving comments via the Discussion Board or my coeditors would have seen this one; it doesn’t affect most users becauase I generally don’t use tables in my content, at least not tables with explicit widths.

The problem was in the feature that allowed users to edit content in the site in an HTML form. The form, which is automatically generated by Manila, is displayed on the page wrapped in a table with width=100% set. Apparently this invokes an obscure bug in IE6/Win in which IE silently adds three pixels of padding when content is displayed next to a float, which if the content next to the float is specified as 100% of the width suddenly means that the content is now 103% wide. To display the content, IE then drops the content down below the float. What this means in practical terms is that every time I wanted to make a change to the site, I had to scroll down past my navigation bar to see the edit area.

The fix turns out to be to specify a dimension (width or height) for the problematic element. In my case, this looks a little like this:

/* fix for tables falling below the float in WinIE; hide from IE5 Mac */

* html #content table { margin-right: -3px;}

/* end hide from IE5/Mac */

So the hack only gets applied to tables in the content pane, and only for WinIE (because it uses the StarHTMLHack wrapped in the commented backslash hack.)

The scariest parts of this are:

  1. Someone actually did enough debugging to figure out the bad behavior and find a clean solution.
  2. This makes the second or third browser specific hack I’ve had to introduce into what was otherwise a fairly clean simple stylesheet. Grrr.

More semantically correct page layout

I really should hang out one of those old “under construction” signs on this site. I keep finding new ways to tweak and optimize both the HTML and the CSS on the site. The under construction part? It may look funny unless you refresh your browser to force the style sheet to reload.

Today’s tweaks:

  • I cleaned up the style sheet, fixing some font inconsistencies (and incidentally saving almost a full kilobyte of file size). I did this by grouping all the CSS classes and other selectors that should have a sans serif font together and stating the font family name once and only once. (For the curious, the exact code is a comma-delimited list of class selectors, followed by this property listing:
    { font-family: font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; }
  • At the same time, I added a new selector that sets the size of H2 headers in my sidebar to 11px, and changed the markup in the sidebar so that each of the bolded headings are tagged as <h2> rather than <p><b>.

So who cares? My readers who use Lynx or other user agents (for instance, the wireless version of Google, which scrapes pages into WML). Now, the sidebar is defined as a series of headings with detail underneath, rather than as an unstructured bunch of paragraphs.

Next step of course is to make it so the content, not the sidebar, appears first in those other browsers, and loads first in modern browsers. That’s a harder job than it appears; more details to come.

RSS on the desktop

Some developments in some software I’m pre-alpha-testing make me wonder: where are the scripts to translate data on your desktop to RSS? On a Windows machine, I would want the security log as an RSS feed for sure. On an OS X machine, some of the system event logs. On both, my mail client.

I’d start hacking my own, but I haven’t seen good base classes in AppleScript to produce RSS. Maybe it’s time to learn Python…

Speaking of Easter eggs…

jeff powers

Thanks to George for this tip:

On the random side of things… Jeff Bezos turns 40 today. Curious? Search Amazon.com for old fart. (Only works on 1/12/04)… [The Chang Journal]

Since the item is going to disappear after midnight, I’ve taken the liberty of reposting the image and text:

Happy 40th Birthday, Jeff Bezos
January 12, 1964

Much better than most of the Easter eggs I’ve ever put in software. Most, but not all…

There was a hidden Easter egg in an old version of the procurement software I worked on that invoked a picture of our development manager, Mike Stopper, head back, snoring, exhausted after an all night coding binge in Saudi Arabia. (Which is another story.) What can I say? It was before we won our contract. The Easter egg was subsequently, unceremoniously, stripped out. But it was probably the best one I ever did, with the exception of the one that I nixed partway through, which would have translated every error message in the system to Pig Latin. Er, Ig-pay Atin-lay.

What happens to abandoned nations?

When both BoingBoing and Slashdot have breathless writing about the future of a small Pacific island nation, you know something’s up. In this case, the island is Niue. You know, as in .nu, the top level domain of the hip. Well, at least of one hip person, Moxie.

The island leaders, in the aftermath of a cyclone that caused more than $50 million (NZ) in damage, are calling for the island nation to return to New Zealand governance and predicting that the island will eventually be deserted. While this might not seem such a big deal—after all, as the original snarky article in the New Zealand Star Times points out, Niue only has the population of a large secondary school—the island was a favorite of geeks for creating the first national wi-fi grid and for selling their TLD to all comers.

The question is, what happens to all those .nu sites?

Dave: Happy users or arcane buggy formats?

Dave’s morning coffee notes take a slightly grumpy tone this morning, as he sets up a strawman in the prickly area of data format support, and knocks it down:

I’ve heard it said that “He who is most liberal in the formats he accepts wins.” I say a couple of things in response. 1. He who says shit like that is probably getting consulting money from a BigCo. And 2. He who has the most happy users wins (and goes to heaven). Users love features, and developers who spend time supporting the most arcane buggy formats aren’t spending time on features that delight users. Formats are there to get the job done, not be pure, not be wonderful, just work, and shut up.

My counter-argument: Look at GraphicConverter. (You could make the same argument with most graphics apps, but let me run with this for a second.) The app started off, as its name indicates, as a tool to convert between graphics formats. And it supports every graphics format: old Amiga formats, JPEG 2000, microscope formats, Windows MetaFile, even graphics from Acorn computers. When it came on the market 14 years ago (!), it did one thing well: conversion of graphics files from one format to another. It’s subsequently built on that base and added neato features like magic wand selection, color correction, alpha channels, until it basically provided all the functions that Photoshop 1.0 or 2.0 had at a tiny fraction of the price. Today it’s my only graphics editor, and it’s immensely valuable. But it’s hard to argue it would have gotten where it is today without being very liberal in the formats it supports.

So what happens to a Web browser that only supports XHTML? Or a newsreader that only supports Atom?

Dave’s post is right: it’s about the users and their needs. But sometimes the users need software that is format agnostic to get the job done.

Hello to my 10 subscribers

Dave has been steadily rolling out new features in his OPML aggregation site, feeds.scripting.com, including:

If you’re not already participating in this community, and you use an aggregator, go, go, join. It’s getting cooler every day.

The past, in living color

russian children on hill 1909
Lisa and I watched a special on the Library of Congress last night on PBS and were blown away by one of the exhibits, a selection of color photos from Tsarist Russia.

Yeah, you read that right. I was blown away, so made my way back over to the LOC website for more info, and found the exhibit, called “The Empire That Was Russia: The Prokudin-Gorskii Photographic Record Recreated.” The Tsar’s photographer, Sergei Mikhailovich Prokudin-Gorskii, invented a camera that took three black and white plates through red, green, and blue filters of the same scene; he would then project the images through colored filters for color images in a magic lantern show. The LOC has taken the plates and recreated the process digitally, applying additional corrections such as careful re-registration and color correction, to yield glorious full color recreations of Prokudin-Gorskii’s photos, which document the extent of Tsar Nicholas’s empire on the eve of revolution.
new york bowery bums 1941

In looking to see who else had written about this exhibition (which is, after all, not news), I found another treasure trove of early color photos, the Charles W. Cushman Photograph Collection at Indiana University. Cushman, a gifted and dedicated amateur photographer who embraced Kodachrome film as early as 1938, two years after its introduction, left an archive of more than 14,000 color slides taken between 1938 and 1969 across the US and other countries. The image quality is outstanding, the indexing superb, and the sense of dislocation even more intense than with Prokudin-Gorskii’s photos. As the introduction to the collection points out, most of us don’t have a “true color” sense of the time before about 1950. Seeing color images of Faneuil Hall before the elevated highway was raised, for instance, is mind-boggling. But Cushman looks beyond buildings, capturing, for instance, a wedding in Boston’s North End, carriage horses feeding in the Piazza Ognis in Florence, the old fruit and vegetable market at Covent Garden in London, children on an old dirt road with flowers in Fairfax County near Dranesville (what is now the northern part of McLean), the Grand Coulee Dam under construction, and many others.

Jarrett House North, now automatically Print Friendly

I have, I think, put the finishing touches on another element of the new design for this website: the print stylesheet. One of the things I wanted to do when I first transitioned this site to a CSS based design was to optimize the print experience as well as the online experience. CSS, through using stylesheets linked for media="print", allows you to specify alternate presentations of your pages for print purposes without having to change your underlying HTML or forcing the user to choose a “print friendly” view.

The print stylesheet for Jarrett House North now suppresses all the navigation elements, gives a reduced size version of the site logo, and (on browsers that support it, such as Gecko-based browsers and Safari) prints the full hyperlink as text next to each link. Give it a whirl—I think you’ll like it.

For now, the regular print-friendly link will remain on every page, for print-friendliness on browsers that don’t offer full CSS compliance. But you no longer have to do anything special to get that print friendly feeling.

One interesting implementation thing I learned in the process. I couldn’t figure out how to dynamically resize the banner image and provide alternate text that I didn’t show in the main template, so I created a DIV that is hidden by the default stylesheet (by setting display: none;) and shown in the print stylesheet. Or at least, that was the intention; the first few times I made the change, the print version of the banner never showed up. I finally figured out that the default stylesheet’s rules are applied to the print content, then overridden by the print stylesheet’s rules. So rather than just redefining the div, I had to actually specifically override the display property by setting display: inline;. Once I did that, I was golden.

The main resource I used in creating the print stylesheet was an article by Eric Meyer at A List Apart called CSS Design: Going to Print.

Morning coffee notes

A few quick ones. I’m working from home this morning, waiting for the slick ice on our hill to melt enough so that I don’t kill someone trying to go down to the office. I may have to leave anyway, though, as the power has flickered here more than once already.

Real HRs and faking them properly

I finally got around to putting in proper HRs in my CSS and in the sidebar. The redesign uses a fleuron from the Cronos font (in which the other fleurons and my page title are set) where a horizontal rule would normally go. Of course, this looks pretty silly in Lynx. So I turned to Dive Into Accessibility to see how HRs should be “faked” using CSS. It turns out to be a pretty simple trick involving background images and HR display rules, though of course there are some hacks required to get properly degraded behavior in downlevel browsers. Anyway, the point is, it worked. You may need to refresh the page to get the updated stylesheet to load properly, but once you do, you’ll see the fleurons and downlevel and text browsers will see horizontal rules.