I recently tried to retrofit a mobile layout onto an old table-based site using CSS. It was a fairly simple layout: A banner across the top, two columns, and a footer. I figured I’d use CSS to “unwrap” the table and make the sidebar and main content area into full-width sections instead of side-by-side columns.

In theory this should be simple: CSS handles tables by using the display property and assigning it table, table-row and table-cell for the <table>, <tr> and <td> elements. You can assign these properties to other elements and make them act as tables, or you can assign block or inline to these elements and make the table act like a series of paragraphs.

Initial testing worked perfectly in Firefox 3.6 and Opera 10.5x. Internet Explorer 8, as expected, ignored the changes entirely. Chrome, however, did something very strange, and Safari reacted the same way: The banner shrank, and the columns changed from a narrow sidebar to a 50/50 split…making it actually worse for small screens.

Clearly WebKit didn’t like something I was doing. Unfortunately, WebKit powers the exact platforms I was targeting: the iPhone and Android!

I dug around with the developer tools a bit to see if I could figure out what was going on. Was the browser not applying the property? Were the table cells inheriting the “original” property from somewhere else? Did I need to change properties on thead and tbody as well?

What I found was that WebKit did recognize the display:block I had added, but somehow the computed style was reverting to display:table-cell. This only applied to table and td, though. Table rows actually did what I told them to, which was why the result ended up looking bizarre.

If it hadn’t changed anything, I probably would have chalked it up to the capability just not being implemented yet. But since it worked on table rows, but not on cells, I decided to treat it as a bug in WebKit and went looking for the best way to report it. I ended up creating a WebKit Bugzilla account and reporting it as bug 38527.

Check out the testcase in Firefox 3.6 or Opera 10.5 to see what it should look like, then take a look in Chrome 4 or 5 or Safari 4.

In conjunction with the Safari 3.1.1 security release, Apple has also released a new version of Apple Software Update for Windows. With version 2.1, they’ve taken the opportunity to fix one of the problems that caused so much criticism last month.

It now shows two lists: one for updates, and one for new software. This takes care of one of the three easy steps that I culled from discussions back in March:

  1. Separate updates from new software and label them clearly. Done.
  2. Leave the new stuff unchecked by default. Bzzzt! Try again!
  3. When run automatically, don’t pop up a notice more than once for each piece of not-installed software. [Edit:] Done.

Unfortunately the new software is still checked by default, but one hopes that the separate list would be enough to make people stop, look, and make a conscious choice as to whether or not to install it.

I don’t know yet how it handles new software when run automatically, or whether they’ve made the ignore option apply to an entire piece of software rather than a specific installer. I’ve taken iTunes off the ignore list and set it to check daily so that I can find out. [Edit:] I haven’t seen it pop up in the last 24 hours, and according to eWeek, “Apple will now only prompt the user if there are critical security updates available.”

Continue reading

I appreciate the fact that Apple provides a single updater for all their Windows software. It’s nice to consolidate things a bit with the profusion of updaters for what seems like each and every application (sort of like how every mobile device seems to need its own charger). But it has its flaws. I’ve mentioned some broken UI design, but the most annoying thing is that it tries to install new software instead of just updating what you have.

At work, I have QuickTime and Safari for development purposes. I don’t have iTunes. I don’t need it. I don’t even have speakers hooked up to the computer. But every time a new version gets released, it shows up in the Apple Software Update list, and I have to tell it to ignore it until the next time they update iTunes.

Now that Safari for Windows is out of beta, it’s doing the same with Safari*. And people are complaining. People like John Lilly, CEO of Mozilla, who sees it as an anti-competitive measure that dilutes users’ trust in software updaters.

Personally, I think there is a problem, but I hardly expected it to turn into the firestorm it has, with Asa Dotzler, c|net, digg, Techmeme, [edit] and now Slashdot, [edit 2] Daring Fireball and Wired (it just keeps going!), and dozens hundreds of commenters entering the fray.

There’s a simple solution, and it’s one of those rare cases where Microsoft gets something right in their software that Apple gets wrong.

  1. Create a separate section for software that isn’t already installed, and label it clearly. It can be in the same list, as long as there’s a separation and a heading.
  2. Leave the new stuff unchecked by default.
  3. Added: If set to check automatically, don’t pop up a notice more than once for each piece of not-installed software.

That’s it. Done. Apple still gets to leverage their installer to make people aware of their other apps, but there’s no chance of someone accidentally installing Safari (or iTunes) by accident because they didn’t read the list too closely. Take a look at Microsoft Update and how they (currently) offer Silverlight. It’s in a list of optional software, and it’s not checked until you choose it.

That’s all this really comes down to: sensible defaults and proper labeling.

Update: Well, two out of three ain’t bad.

*I have to admit getting a kick out of the title, “Apple pushes Safari on Windows via iTunes updater,” because my problem is that they’re pushing iTunes on Windows via their Safari updater. It’s a matter of perspective.

Acid2 reference image.After looking at how Safari 3.1 handles the Acid2 test, and finding that under some circumstances/platforms it fails the test, I realized: that one line, with the eyes, has been the cause of most regressions in browsers that previously passed the test.

Rows 4-5 test fallback behavior for objects. The idea is that if a page tries to load an external resource, but can’t—the file is missing, the server’s down, the network’s slow, the browser doesn’t have the right plugin, etc.—the page can provide alternate content. And it can be nested, so you can try, say, a video clip that falls back to an SVG image that falls back to a PNG that falls back to text. Continue reading

Safari LogoGrabbed the new Safari 3.1 this morning, both at work (WinXP) and on the laptop at home (Leopard). Noticed that the website no longer says “Beta” for the Windows version.

Oddly enough, there doesn’t seem to be much chatter from the browser community about it, at least not on sites I follow from work. There may be 25 posts on my RSS reader at home, for all I know.

I wish Apple would make the release notes easier to find. I clicked on the “more info” link in Software Update at home, but didn’t have time to really read it. I wanted to check the list at work, but there’s no menu item, it’s not visible on Apple’s website, and their search engine hasn’t indexed it yet. I had to search Google, and found it from some random person’s Twitter post. (Oh, and Apple? As long as I’m giving you advice, you’re running your site on Apache. Apache has a feature called mod_speling [sic] that will automatically correct a single-error typo when someone hits your site. I highly recommend that you look into it instead of handing out a 404 error whenever someone’s finger slips.)

User interface seems mostly the same as 3.0.

Not sure if it’s new or I just never noticed it, but the history menu has an option to reopen all windows from the previous session. It isn’t the automatic recovery offered by Firefox or Opera, but it’s the next best thing—and quite handy for cases when, for instance, Norton Antivirus has just updated itself and popped up a “will reboot in X seconds” warning, which you didn’t see because you had too many windows open. *ahem*

I believe this is the first browser released that supports embedding TrueType fonts. (IE has been able to embed fonts for years, but you had to convert them first, which may be why you don’t see too many these days.) When WebKit first added the feature last fall, I tested it out on my Les Mis page.

I really like the new developer tools (Prefs→Advanced→Show Develop menu), especially the network timeline. This, combined with YSlow on Firefox (itself an extension to Firebug), will be extremely useful for optimizing site performance.

It gets 77/100 on the Acid3 test, much better than Safari 3.0, which only scored 39/100. WebKit looks like it’s on track to be the first engine to pass again, having hit 93/100 yesterday. Oddly enough, the Acid2 regression is still present on XP (need to compare to the Mac version it displays correctly on the Mac), with an orange band covering the eyes and the border to the right of that band red instead of black.

Another odd thing: when it’s really busy, it seems to revert to a standard window frame instead of its own skin.

Who wants to bet that .Mac will be one of the first webapps to really make use of offline storage?