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.