CSS layout

I’ve been playing with the CSS layout again (as you can probably tell). But I’m finding browser bugs very frustrating… Basically, I’ve discovered that I do not know enough to work around them to the point where I can completely separate layout from content.

The sidebar (its called newsbar in my HTML and CSS) is in the footer Blosxom component so it arrives at the end of the HTML. In my previous layout, the newsbar and the copy were floated left and right respectively. This worked fine as long as there was a gap between them. When I tried to butt them together, I ran into issues getting IE to render the way I wanted.

Inknoise has a very cool tool for generating CSS layout and using it I can get the layout I want with the newsbar down the left hand side. Unfortunately the newsbar renders at the bottom of the page after the story content. I’ve tried playing with absolute positioning, but again I run into browser inconstancies. The only way I’ve managed to get it to work is to move the newsbar content to the Blosxom header component so it occurs before the story content. Not a big deal really, it would only mean editing a couple Blosxom components… but its the principle of the thing. I thought that CSS meant I wouldn’t have to muck with my content to get my layout to work.

Damn real-world implementations!

Sigh… So for the time being, this is the layout I’m going to stick with (until I redesign again). I’m not sure whether I like it or not, I’ll have to wait to see whether it grows on me..

Editing HTML

The choice of HTML Editors his highly personal I know. But at the risk of starting a war, I’d like to recommend HyperEdit.

It offers a two paned view of your document with an HTML edit pane and a live preview (using WebKit). Granted, many text editor will do this now (BBEdit, SubEthaEdit, Taco), and I’ve tried them all, but what I really like is how light weight HyperEdit is. It opens almost instantly, and is snappy, snappy, snappy! It works well with CSS, and since my HTML is usually fairly small (most of the layout is in CSS) it is almost the perfect tool for me.

The latest beta includes a Code Snippet drawer that makes HyperEdit go from cool to the bees knees in my book. It’s nagware (but not annoyingly so) and well worth the US$10 requested.

I give it two nostrils up!

While I’m at it I might as well put in a plug for CSSEdit too. Have I ever mentioned how much I love CSS? I would never profess to be a designer, but from a strictly nuts and bolts perspective, it makes maintaining/changing the look of a web site a breeze