Putting my main content first, finally, with CSS

I wanted to fix the new design so that it read well in Lynx (and by extension in other non-graphical browsers, for instance screen readers). After all, Day 10 of Dive Into Accessibility is to present your main content first, and one of the virtues of my previous design was that it did just that. (Mostly; it did have the calendar links before the content, and they were a mess in Lynx.)

So, no problem, right? My main design was two columns, a content column to the left and a navigation column floated to the right. I should just be able to put the content div first and put the navigation div after. Right?

Except that the order in which floats occur, relative to non-floated content, actually matters. To get things working right, I would either have to float the content div instead or find another approach. But as it turns out, floating the content div was a non-starter because it meant I would have to fix the width of the content div—and even if I set the width to a percentage, I would still run into some ugly layout problems in narrow browser windows.

So I waited. Which turns out to be the correct move, since a solution was posted in the comments at MezzoBlue on Friday that explained exactly how to do what I was looking for. There’s a negative margin the width of the sidebar on the main content div, with a right margin set to the same width. That gets the content div out of the way and leaves enough room for the sidebar.

It’s a tricky little hack, and it scared me sufficiently that I changed the name of the stylesheet to ensure that new browsers would download it so the page wouldn’t look broken. The good news is that means that old pages that haven’t been re-rendered on the static site should still look OK, though they won’t get the correct content order until they’re fixed.

Thanks to Dave Shea at MezzoBlue for asking the question, and to Ryan Brill for providing the solution.

Growing out of puppyhood

We had a surprise yesterday: our little girl puppy, Joy, is now too big to fit comfortably inside her fashionista doggie bag. Our little guys are growing up…

We decided that it’s time to take down some of the gates that we’ve used to keep them out of parts of the house, in the process opening up a hallway they’ve never been in. They were doing running yesterday through the hallway and barking once each time they turned the corner, like a lap counter. It feels more like our house again with the gates down.

Closer to automatic feed updating

Unanticipated side effect of feeds.scripting.com: my subscription list went from 124 feeds to 164 in about two weeks. (And the number of folks subscribing to my feeds went from 10 to 20. Thanks, all!)

I finally got around to replacing my feed list, which I had previously done as a static upload, with a link to a location on my site. I haven’t been able to get it to render in the opmlBlogroll macro for some reason (I keep getting [Macro error: Could not open the url, “http://www.www.jarretthousenorth.com/annex/MySubscriptions.opml”, because it could not be converted to an outline.]), but we’ll get there eventually.

And I’ve figured a way that I can automatically update the file, despite the fact that I can’t automate exporting OPML from NetNewsWire with AppleScript. More on that once I implement it.

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.

Watergate 2004 = old news?

Geez. I did a Google News search that turned up a two week old story in the Nation that cites the GOP snooping, and indicates that it’s been public knowledge since the Wall Street Journal published the leaked memos in November. (And the article quotes Orrin Hatch as saying, “there is no excuse that can justify these improper actions.” I guess his staff weren’t listening, or they wouldn’t have offered the defenses quoted in the Globe article.)

Apparently what’s new today in the Globe article is the scope and duration of the intrusions.

Watergate 2004? Maybe not

Via Josh Marshall and the Boston Globe, “Senate’s GOP staff pried on Democrats.” Sounds eerily familiar, except this time (thirty years later) it’s the Senate, not the White House staff, being accused of illegally eavesdropping on the other party. Apparently, for almost a year, GOP staffers on the Senate Judiciary Committee were accessing what the Globe article calls “restricted Democratic communications” and leaking the information, including sensitive documents about Democratic positions and tactics on judicial nominees.

On the technology level, there is a claim in the article that the GOP’s computer technician told his Democratic counterpart of the problem but that nothing was fixed. Hmm. So if I happen to notice that your office is unlocked, that means it’s OK to come inside, read your mail, and leak all the juicy parts to your co-workers?

On the political level, it’s interesting that only the Republicans chose to take advantage of the glitch, though it appears to have granted equal access to both sides’ documents. It’s also interesting to speculate how high up there was awareness that these files were being accessed.

It’s no executive level cover up. But it is interesting to hear GOP spinmasters say things like “There appears to have been no hacking, no stealing, and no violation of any Senate rule.” That sets an interesting precedent for prosecuting computer crime going forward.

Finding Appalachian music with BlueRidgeMusic.org

For all who are interested in the traditional folk music of America, BlueRidgeMusic.org provides a searchable database by state, county, location, keyword, and date of all traditional music happenings in the Blue Ridge Mountains between North Carolina and Virginia. The Marshall Depot is listed as a venue, as are a few other gigs in and around Asheville.

The database is courtesy the Blue Ridge Institute and Museum at Ferrum College in Virginia, which also has some pretty cool Appalachian music material in its current online exhibit, “Deathly Lyrics: Songs of Virginia Tragedies.”

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.

Around the state of the union in nine points

A quick roundup of SOTU links so that I can finally close this collection of tabs in my browser:

Manila viewNewsItems goodness

I started playing around with a Manila macro that I had had filed away on my to do list for a while, the viewNewsItems macro. It’s a pretty powerful macro, allowing you to take your content and slice and dice it chronologically and by news department (aka category), as well as changing the presentation.

The only problem was I couldn’t figure out how to get the date parameter limits working. Every date string I passed in seemed to be ignored. I finally realized that I needed to let Manila figure out the appropriate date format for itself. So instead of trying to figure out the appropriate date string format, I used the date verb instead:

{viewNewsItems (n:100, department:"Music", maxDate:date("12/31/2001"), minDate:date("1/1/2001"))}

It seems like every programming language I run into has the same issue about how to deal with date formats. Here the safest thing to do seems to be to use the programming environment’s typing capabilities rather than figure out how to format the string properly.

Remembering IAP

Good crowd out last night at the IAP young alum gathering. True to the title, most of the folks there were young alums—folks who had finished their undergrad degrees in 2002 or 2003. But I had some nice conversations with a few of them.

I also had a chance to talk with Don, Kumar, Peter, and a few other Sloan folks. Don is apparently “living the dream” and working on the startup thing. It was good to see everyone.

Post caucus roundup: how to translate passion into action?

There’s too much chatter about the Iowa primary this morning to summarize even a thousandth of what’s being said. Two quick pointers: Scoble and Doc think Dean’s loss is about the Internet candidate not translating well to television; Greg wonders if this will position Dean as the power broker for the convention.

The real question for the Internet candidate, as I think for all of us who feel passionate about America and about our freedoms and using the Internet to build a more perfect union, is how do we make that vision real? How do we infuse the rest of America with our conviction? How do we translate passion into real action? How do we get down out of our ivory towers long enough to save the world.

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.