{"id":15,"date":"2003-08-19T10:39:53","date_gmt":"2003-08-19T14:39:53","guid":{"rendered":"http:\/\/blogs.law.harvard.edu\/stepno\/communal-debugging\/"},"modified":"2003-08-19T10:39:53","modified_gmt":"2003-08-19T14:39:53","slug":"communal-debugging","status":"publish","type":"page","link":"https:\/\/archive.blogs.harvard.edu\/stepno\/communal-debugging\/","title":{"rendered":"Communal Debugging?"},"content":{"rendered":"<p><a name='a12'><\/a><\/p>\n<p>I was just reading in <a href=\"http:\/\/smartmobs.com\">Smartmobs<\/a> about <a href=\"http:\/\/www.janegoodall.org\/chimps\/communication.html\">chimpanzees<\/a>&#8216; practice of picking bugs off each other as one of the first forms of <a href=\"http:\/\/www.hup.harvard.edu\/reviews\/DUNGRO_R.html\">social cooperation and communication<\/a>.  What&#8217;s good enough for chimps is good enough for bloggers, even at Harvard. <\/p>\n<p>In case it&#8217;s helpful to anyone else, I&#8217;ve found &#8220;workarounds&#8221; for a problem Apple&#8217;s Safari browser has with some weblog pages. In particular, the links on the left half of <a href=\"http:\/\/blogs.law.harvard.edu\/lydon\/\">Chris Lydon&#8217;s page<\/a> weren&#8217;t working with Safari. They were fine with other browsers on both Macs and PCs. <\/p>\n<p>For the reader, the workaround is easy &#8212; use <a href=\"http:\/\/mozilla.org\/\">Mozilla<\/a> or some other browser.  <\/p>\n<p>For the person building the Web page template, there&#8217;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 &#8220;float:left;&#8221; disabled Chris&#8217;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&#8217;re determined figure it out and enlighten the rest of us.<\/p>\n<p>Digging deeper, I discovered that the &#8220;content&#8221; style (with &#8220;float&#8221; included) disables links if it is called from inside a table cell (td) tag. Maybe Safari doesn&#8217;t expect &#8220;float&#8221; (a new CSS technique) and tables (an old HTML technique) to be nested that way. I&#8217;ll leave that to folks much geekier than I am&#8230;<\/p>\n<p>If all you&#8217;re after is that useful &#8220;workaround,&#8221; you can stop reading here!  If you want some debugging-101 tips and links to more about learning CSS, continue&#8230;<\/p>\n<p>Motivation: Besides blogging, one of my summer-fall projects is to finally get around to using <a href=\"http:\/\/hotwired.lycos.com\/webmonkey\/reference\/stylesheet_guide\/\">Cascading Style Sheets (CSS)<\/a> instead of the retro-1996 font and table codes on my <a href=\"http:\/\/stepno.com\">older pages<\/a>. 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.<\/p>\n<p>More motivation: I want my students and other Mac users to be able to hear Chris&#8217;s great MP3 audio interviews, which are linked to his blog entries&#8230;  (Come to think of it, an icon of an old-time radio or something might make the audio links more obvious&#8230;)<\/p>\n<p>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&#8230;<\/p>\n<p>Eliminate some suspects: Chris and I are using the same page-building tools, but different page templates with different style sheets. I&#8217;d read that Safari&#8217;s earlier versions had <a href=\"http:\/\/www.macedition.com\/cb\/resources\/safari_notes.shtml\">trouble with CSS<\/a>, so that was the starting point.<\/p>\n<p>Basic debugging:<\/p>\n<p>I made a copy of Chris&#8217;s page code, opened it in a text editor, deleted all the  CSS information, and tried my new copy. All the links worked! <\/p>\n<p>Then I put back the CSS a piece at a time until the links stopped working. (OK, it was a slow Sunday afternoon.)<\/p>\n<p>A few dozen lines into the CSS code, in the &#8220;#content&#8221; section, there&#8217;s a line that says &#8220;float:left;&#8221;  &#8212;  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. <\/p>\n<p>I still don&#8217;t know what all of the styles do, or why the problem happens, but removing that line is a good enough &#8220;workaround,&#8221; and the rest of the page still looks fine.<\/p>\n<p><a href=\"http:\/\/www.google.com\/search?q=CSS+Safari+%22float:left%22&amp;ie=UTF-8&amp;oe=UTF-8\">Googling around<\/a>, I see that the &#8220;float:&#8221; concept has some history of giving the browser-builders problems. Maybe these sites offer a clue&#8230;<\/p>\n<p><a href=\"http:\/\/lists.evolt.org\/archive\/Week-of-Mon-20030602\/141902.html\">http:\/\/lists.evolt.org\/archive\/Week-of-Mon-20030602\/141902.html<\/a><\/p>\n<p><a href=\"http:\/\/diveintomark.org\/safari\/\">http:\/\/diveintomark.org\/safari\/<\/a><\/p>\n<p>In fact, my two-year-old copy of Jennifer Niederst&#8217;s <i>Web Design in a Nutshell<\/i> even says, &#8220;Support for the <i>float<\/i> property is poor as of this writing, but it should prove useful in the future for creating drop caps and similar effects.&#8221; I guess &#8220;the future&#8221; isn&#8217;t all the way here yet.<\/p>\n<p>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&#8217;t work until I removed the &#8220;content&#8221; tag. I tried the tag again, without the table, and the link worked. <\/p>\n<p>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 <a href=\"http:\/\/scriptingnews.userland.com\/2003\/08\/17#lydonCssSafari\">the same workaround<\/a> &#8212; someone who isn&#8217;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&#8217;s page may have to wait until <a href=\"http:\/\/blogs.law.harvard.edu\/thursdays\">Thursday<\/a>.<\/p>\n<p>Live. Learn. Blog.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was just reading in Smartmobs about chimpanzees&#8216; practice of picking bugs off each other as one of the first forms of social cooperation and communication. What&#8217;s good enough for chimps is good enough for bloggers, even at Harvard. In case it&#8217;s helpful to anyone else, I&#8217;ve found &#8220;workarounds&#8221; for a problem Apple&#8217;s Safari browser [&hellip;]<\/p>\n","protected":false},"author":1090,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/archive.blogs.harvard.edu\/stepno\/wp-json\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/archive.blogs.harvard.edu\/stepno\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/archive.blogs.harvard.edu\/stepno\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/stepno\/wp-json\/wp\/v2\/users\/1090"}],"replies":[{"embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/stepno\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":0,"href":"https:\/\/archive.blogs.harvard.edu\/stepno\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"wp:attachment":[{"href":"https:\/\/archive.blogs.harvard.edu\/stepno\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}