the daily report

web design news since the 14.4 modem was hot

11 February 2003 :::

11 pm | 3 pm | 11 am EST

Tweaks and tests

After futzing with the default and alternate style sheets, we solved Safari’s worst problem – namely, the disappearing sidebar when the alternate style was invoked. We then tested in leading browsers. The results surprised us and may surprise some of you, too:

IE6/Win: No problems at all.
IE5/Mac: No problems at all.
Opera 7/Win: One reader reported that Opera “forgot” cookie settings after changing styles, but in our tests we encountered no problem of that nature or any other. Style switching will not work in older versions of Opera (insufficient DOM support), but Opera users tend to be clued-in about upgrades.
Safari: From time to time, Safari loses track of cookie settings.; Safari strangely sticks bits of the white layout into the orange layout. Most noticeably, Safari takes a grey-green background from the bottom of the white layout’s sidebar, and sticks it into the bottom of the orange layout’s sidebar. There is probably a very geeky name for that kind of error.; PDF: the error in Safari. See that grey-green bar at the bottom of the sidebar? It shouldn’t be there.; PDF: correct display (as seen in Chimera). See how there is no grey-green bar at the bottom of the sidebar? Righto.; Prior to tonight’s tweak, Safari lost the sidebar when switching to the orange layout. We initially used a different method to position the sidebar in the two layouts (float in the white layout, absolute positioning in the orange layout). We later thought that might be what was confusing Safari, and we were right. Once we made both layouts use the same methods, Safari’s worst problem was solved.
Netscape 7 and Chimera: As expected, these Gecko browsers handle both CSS layouts superbly. But Netscape and Chimera randomly forget cookie settings, shifting suddenly, and for no apparent reason, from the orange layout back to the white.; In the JavaScript onclick event that triggers the style switching, Netscape 7 and Chimera become confused by the anchor link. Ignoring return false, they load the site’s index page when clicked. (This site uses a base href, so it’s not surprising that an <a href="#"> link will take you to the home page. But browsers are supposed to ignore anchor links in JavaScript functions that end in return false.) To see for yourself, visit an internal page and switch styles. After the swap, you will be taken back to the home page. The effect can be disconcerting. :::

Switch!

We’ve installed the first of several alternate styles. “Orange” has a pulpy feel in more ways than one. To try it on for size, use the new style switching widget in the left-hand sidebar (requires cookies and JavaScript). :::

Rules-based design, part 1

Most modern browsers understand CSS like the following:

img+h3	{
	margin-top: 15px;
	}

It tells browsers to leave 15px of white space above any h3 heading that is immediately preceded by an image. Such as, for instance, the ever-changing h3 heading directly beneath the ever-changing header photo at the top of this column.

CSS2 selectors like img+h3 allow you to establish design rules covering various contingencies – for instance, photo immediately above h3 vs. no photo immediately above h3. With such rules in place, you are free to write clean, unsullied markup and let your rules fuss with the niceties of layout.

IE/Win does not understand these rules. Not even IE6/Win understands them yet. Hence the first entry on this page inevitably crowded the bottom of the photo when viewed in IE 5–6/Win. (The page displayed correctly in Opera 7, Netscape 7, IE5/Mac, Mozilla, Chimera, and Safari.)

This is where some designers would stick a <br /> under the image, and others would go back to tables and spacer gifs.

Tonight we compromised by deleting the img+h3 rule and applying a class to the image at the top of the column (the class adds white space to the bottom of the image). We hated to do it. It was just a humble little class attribute, but it felt so 1999. Design will be cleaner and better when IE/Win joins other browsers in supporting more CSS2 selectors. :::

Safari switch snafu

In Safari, the sidebar may disappear when you switch styles. When you reload, the old style is restored. None of this is expected behavior. There may be a bug in Safari’s handling of JavaScript. If this happens to you – and it may not happen in every copy of Safari – the following steps seem to fix the problem:

Go to Safari: Preferences: Security: Show Cookies.
Manually delete any cookies set by zeldman.com.
Quit the browser.
Restart the browser and return to this page.
Switch styles. The sidebar may still disappear. Never fear.
Reload the page again. This time the sidebar should be visible.
If you switch back to the earlier style, parts of the sidebar may show up in the navigation area. Reload again.

Note: see “Tweaks and tests,” above, for an update on this bug and information about problems in other browsers. :::

Chance meeting

Theblowup.com presents an interview with James Chance, post punk New York sax maniac. We met him backstage in the 80s when our group, the Insect Surfers, was warming up for his group, James White and the Blacks. He was smart and ornery then, and apparently still is. :::

Yipes! Stripes!

The big wide stripe is gone. It felt vaguely oppressive in browsers that displayed it correctly (Netscape 7, Chimera, IE5/Mac, Safari, Mozilla) and rather tawdry in those (IE6/Win and Opera 7, come on down!) that incorrectly let a few stray pixels peek through on the left, like hairs at the fringe of a bikini.

We like the white better anyway.

The striped version has been uploaded as an alternate style sheet, making it accessible to Netscape 6+ (View: Use Style: Stripe) and Mozilla. If your browser does not provide a native style-switching UI, you’re not missing much in this case. :::

9 February 2003 :::

weekend edition

Trying something new. When in doubt, reload.

MSN and Opera: the folly of conditional CSS

As many Daily Report readers know, MSN does not work correctly in the latest version of Opera, because MSN sends Opera 7 different HTML and CSS files than it sends to earlier versions of Opera and to other browsers. This may represent deliberate sabotage or it may be an innocent (though spectacular) display of developer incompetence, but in either case it demonstrates the folly of old design methods.

Sniffing browsers to send specialized CSS files often results in ugly, illegible pages, though they are rarely as badly bungled as at MSN. Even when it works (as at NYTimes.com) it is still a pointless waste of bandwidth and development expense. Many designers who cut their teeth on incompatible browsers still haven’t realized that one file can serve all browsers. What should you do instead?

Send one CSS file to all browsers.
If you need to support outdated browsers, place simple styles in a linked CSS file, and use the @import directive to fill in the remaining styles old browsers can’t handle.
Compensate for known CSS bugs in recent browsers in the same CSS file you send to everyone. For instance, like many other designers, we use the Tantek hack to compensate for known box model and font size bugs in versions of IE/Win prior to 6.0.

Never write CSS files for any particular browser. It will put you in the position of having to write additional, browser-specific CSS files every time a new browser is released or an old one is updated. It will also force you to continually update an increasingly complex browser and platform detection script every time a new browser is released or an old one is updated. Writing these files and scripts takes time and money. The resultant client-server negotiations waste bandwidth and slow down the site for all visitors. The process is imperfect and you are likely to create more problems than you solve. And none of it is necessary. It’s all simply a waste.

Site owners, if your agency or in-house team is sniffing browsers to send them different CSS files, they’re wasting your money and laying the groundwork for compatibility problems that will bite you down the road. :::

SXSW Panels

In World Tour: Dates, times, and descriptions have been posted for our SXSW Interactive panels featuring (in alphabetical order) Tantek Çelik, Todd Dominey, Adam Greenfield, and Eric Meyer. :::

Smoke this

Our pals at K10k have launched their Cuban Council business site, sporting a tangy color scheme and subtly interactive details. Oh, and it validates as XHTML 1.0 Transitional. :::

It floats upstream

“Toward a More Standards Compliant Internet Explorer:” John P. Gallant explores problems with IE/Win’s implementation of the CSS “float” property (Digital Web Magazine). Float is essential to all CSS layouts – it’s how we tell elements to sit next to each other instead of lining up one after the other in Chinese fire drill formation. Designers continually smash their fingers on the blunt edges of IE/Win’s float woes. Gallant recommends that Microsoft address the problem by adopting a third DOCTYPE switching mode. :::

Chimera flickers

“Bye Chimera, Thanks for Trying” summarized lead developer Mike Pinkerton’s doubts about the Gecko-based Mac browser’s future after Apple released Safari (Blogzilla). Fortunately, work on Chimera will continue.

Because it shares the same layout engine, Chimera is as standards-compliant as Mozilla and Netscape, i.e. more compliant than anything else out there in the estimation of many informed developers. OS X users may prefer Chimera to its brothers, as Mozilla and Netscape’s cross-platform UI widgets make you feel like you’re using Windows. They also lack OS hooks only Chimera offers – such as the ability to select tool bar bookmarks from the Dock. We’re mighty glad that the Chimera group will keep on keepin’ on. :::

Best practices make perfect

Common HTTP Implementation Problems (W3C) discusses little considered aspects of URL naming and HTTP and their implication for designer-developers, systems administrators, and browser makers. Not every point pertains to every reader, but even a quick scan may prove enlightening. :::