Communal Debugging?
I was just reading in Smartmobs about chimpanzees‘ practice of picking bugs off each other as one of the first forms of social cooperation and communication. What’s good enough for chimps is good enough for bloggers, even at Harvard.
In case it’s helpful to anyone else, I’ve found “workarounds” for a problem Apple’s Safari browser has with some weblog pages. In particular, the links on the left half of Chris Lydon’s page weren’t working with Safari. They were fine with other browsers on both Macs and PCs.
For the reader, the workaround is easy — use Mozilla or some other browser.
For the person building the Web page template, there’s a quick fix too, and the page may be working by the time you read this. A content-positioning style code in the form “float:left;” disabled Chris’s links for no apparent reason. Take out that two-word line of code and the page worked just fine. The reason why is another story, and all I can provide are links that might give more clues if you’re determined figure it out and enlighten the rest of us.
Digging deeper, I discovered that the “content” style (with “float” included) disables links if it is called from inside a table cell (td) tag. Maybe Safari doesn’t expect “float” (a new CSS technique) and tables (an old HTML technique) to be nested that way. I’ll leave that to folks much geekier than I am…
If all you’re after is that useful “workaround,” you can stop reading here! If you want some debugging-101 tips and links to more about learning CSS, continue…
Motivation: Besides blogging, one of my summer-fall projects is to finally get around to using Cascading Style Sheets (CSS) instead of the retro-1996 font and table codes on my older pages. Styles are basically a more elegant and flexible way to deliver page contents. My best students used to laugh at my kludgy old non-CSS pages.
More motivation: I want my students and other Mac users to be able to hear Chris’s great MP3 audio interviews, which are linked to his blog entries… (Come to think of it, an icon of an old-time radio or something might make the audio links more obvious…)
Final motivation: Just in case some of those students are reading this and can continue to learn from my fumbling around, here are the steps I followed…
Eliminate some suspects: Chris and I are using the same page-building tools, but different page templates with different style sheets. I’d read that Safari’s earlier versions had trouble with CSS, so that was the starting point.
Basic debugging:
I made a copy of Chris’s page code, opened it in a text editor, deleted all the CSS information, and tried my new copy. All the links worked!
Then I put back the CSS a piece at a time until the links stopped working. (OK, it was a slow Sunday afternoon.)
A few dozen lines into the CSS code, in the “#content” section, there’s a line that says “float:left;” — take it out, and the links all work. Put back the rest of the CSS code, they still work. Put that one line back, the links stop working.
I still don’t know what all of the styles do, or why the problem happens, but removing that line is a good enough “workaround,” and the rest of the page still looks fine.
Googling around, I see that the “float:” concept has some history of giving the browser-builders problems. Maybe these sites offer a clue…
http://lists.evolt.org/archive/Week-of-Mon-20030602/141902.html
http://diveintomark.org/safari/
In fact, my two-year-old copy of Jennifer Niederst’s Web Design in a Nutshell even says, “Support for the float property is poor as of this writing, but it should prove useful in the future for creating drop caps and similar effects.” I guess “the future” isn’t all the way here yet.
As for identifying the content vs. table conflict, I used a similar cut and paste trial. I used the original style sheet, but deleted all the contents of the page except for a one cell table with one link inside. The link didn’t work until I removed the “content” tag. I tried the tag again, without the table, and the link worked.
Meanwhile, in the time it took me to post the first draft of this info, Dave Winer has posted a note about the CSS problem, and another reader contributed the same workaround — someone who isn’t as verbose as I am. Oh well. I hope somebody out there finds this long-winded explanation educational! Unfortunately, the actual fixing of Chris’s page may have to wait until Thursday.
Live. Learn. Blog.
