CSS, still not great

After being in the too-comfortable position of being able to develop and demo the Intelligent Book on a Mac, I finally had to bite the bullet and sort out the layout for various different browsers. Sadly, it seems that cross-browser CSS is still just as much of a pain as it ever was.

Some of the wrinkles (as "notes to self"):

Firefox 2 does not understand inline-block. IE7 does, but only for inline elements (not 'div's and 'li's). One solution to this is to make almost everything a span, and then:

display: table-cell;
display: inline-block;

Firefox 2 will default to table-cell (skipping the following inline-block). Most other browsers will use inline-block.

IE8, even though it has better support, gets things wrong with resized images in inline-blocks. Specifically, if you resize the image by setting just the height, although it readjusts the width of the image as it displays, it still uses the old image width when calculating the size of the block (meaning lots of excess whitespace).

Chrome (so perhaps also Safari) has an odd effect when you try to work around browser differences by lining inline-blocks up as

diplay: table-cell

A paragraph placed in the code above nested table content within the table-cell will often appear underneath the table-cell instead of above it. This can be fixed by setting the paragraph as

display: table-caption

Redirecting

I don't use Google's Chrome browser very often, but today I did and I noticed that in the home page (that shows little square snapshots of your most visited sites), the square snapshot of the GMail login page is shown with the title "Redirecting" rather than Gmail. Just thought it was curious that happened for one of Google's own products.

Google Chrome

So apparently Google is working on it's own browser, and they have produced probably the least funny comic in history to let the world know. Apart from the technical reasons for the browser, that are trumpeted in the cartoon, I imagine the business types at Google are also interested in solving the little issue that while most of the world use Google's search platform, they mostly do it using their arch-competitor's browser (Internet Explorer). Despite extensive funding from Google, Mozilla have never had the brand presence to undo Microsoft's browser-dominance as much as Google would, no doubt, like.

Google's project is planned to be open source, make all the technical bloggers very happy people. But it's worth remembering that "open source" does not mean "democratic". We can reasonably expect Google's browser to be designed carefully around Google's services. This is a branded browser that it likely to be promoting GMail over, say, Hotmail or Yahoo, and GTalk over Skype, AIM, or Facebook's instant messaging.

But then, the chances are that even Google's brand presence will not push out IE in the near term -- how do you market a "better browser" to an end-user who doesn't know any of the technical reasons? Especially when you can't afford to stop giving the browser they're already using great support? However, a Google Browser probably could out-compete Mozilla's Firefox. (And for how long will Google continue to fund Mozilla? They are by far the biggest financial contributor at the moment.) That in turn could help Google dominate some of the competition in Web-based applications -- the losers from this might well be AOL, Skype, and Adobe.

And then there's the small matter of upcoming competition -- competing for the next generation of apps. Adobe AIR threatens to take Web applications out of the browser, and provides a rich application environment without some of the hassles of HTML. That could become a compelling story, and Adobe have a history of getting their product out to a large userbase (Flash has around a 90% install-base). And they have an online-documents suite that is a minor competitor to Google Docs, but that could easily become more compelling. So, it is very much in Google's interests to improve the HTML+Javascript experience of the browser, since that is where all of their business is based.