The Fugue

I’m not an HTML/CSS guru, but I do know my way around and I do try to use
“semantic HTML” and CSS for styling wherever possible. I hate tables for
layout, if for no other reason than they’re a big mess and hard to read, and I
do all my HTML by hand (or generated programmatically, e.g. by
Markdown,
Markaby, or
Haml).

So I’m a little bit surprised that even lil’ ol’ dabbler me has more than once
wished to put blocks together in an inline-like flow, e.g. for a photo gallery
or other dynamic grid-based layout, and yet the big guys are content to fall
back on tables. Maybe I can afford to be more puritanical as a hobbyist.

I dug into the issue once again, determined to finally grok the CSS box model
and view model once and for all. I don’t know if I got that far, but I do
understand enough about display: block and display: inline to see why it
doesn’t work the way I was hoping it would work. It boils down to a block
element will seek the left edge of its parent.

But, there *is* a way to do precisely what I want to do in CSS 2.1. It’s called display: inline-block, and it says to layout block elements in the inline flow. If you’re still lost about what I’m driving at, there’s a nice live demo and screenshot of display: inline-block at quirksmode.org. Alas, IE and Gecko (Firefox, Mozilla, Camino, etc.) don’t support this display mode. But in browsers that do (e.g. KHTML-based browsers like Konq and Safari), it’s a thing of beauty.

So we need a workaround for Firefox and IE. You could revert to tables if you detect those browsers, but I like to keep the HTML unchanged. You could use float: left, and that works very well unless your blocks are different heights. So you can force your blocks to be the same height, and possibly use overflow: auto to give scrollbars as needed (or hide the overflow or let it just overflow or whatever).

So here’s a little example. The blue blocks use display: inline-block and the green blocks use float: left.

Do play around with it by resizing your browser and dusting off that Konquerer or Safari browser to see how the blue blocks look when rendered correctly.

I think it’s a crying shame that firefox doesn’t render this properly. Maybe the complacent table-hugging masses haven’t made enough noise. Let’s make some noise.

While I’m on the subject, I highly recommend css_browser_selector.js method of doing browser-specific CSS.

I’m giving flock another look tonight and I’m liking what I’m seeing. The RSS reader is at least as good as Safari’s. I’ve been stuck in Safari even though I might rather use Firefox for months now, because I was addicted to the RSS reading, so this is great. Flock looks better in OS X than firefox, although it’s not quite as nicely integrated as Safari.

I have a couple of major gripes. It imported my Safari settings only after I explicitly asked it to, and then it failed to do anything useful with my RSS feeds from Safari. Talk about a wet blanket. So I figured out how to create OPML from Safari and tried to import it. Flock failed to import it. Strike two. So then I decided to try the built-in blogging fun, and I’m not impressed with the stupid editor. Composing blog entries in what is basically the same interface as Netscape Composer ten years past is not my idea of cutting edge. I should have the option of starting out in source mode, but more importantly (since editing HTML is even less fun than using a composer-like interface) I should be able to use Markdown or Textile or whatever I want. I’ll still be using flog for writing my posts.

Nevertheless, flock looks promising indeed, and I may end up using it if I can get my RSS imported.

technorati tags:flock, safari, rss, blog

Update: there’s something else right there: my blog has tags, I don’t want tags in the post. Sheesh.