Getting annoyed with cross-browser CSS

[jwoolf09]

I'm beginning to get seriously annoyed with CSS. I'm trying to build a small website for a personal business. I'm trying to be a good little modern 21st-century designer and do it all with CSS, no tables.

But the g--d---ed browser incompatibilities between Firefox and MSIE are killing me.

Here's what keeps happening: I spend hours (literally) experimenting with CSS until the page looks the way I want it to in Firefox. I have enough trouble just doing that -- CSS2 obstinately refuses to work the way I expect it to, or indeed in any halfway rational way at all. I'm trying to design a page that's basically a bunch of blocks: header block, menu bar block, large content block with smaller blocks inside it. These different blocks themselves are hell trying to get everything to align properly. In particular, I want the blocks to align the same way in any screen size from 800px on up, and resize dynamically as the user changes browser window size. I could do this in thirty seconds with tables, but I have to hack away for hours to do it with CSS margins and padding and floating and whatnot. I have a distinct feeling I'm doing something wrong, making the job a lot harder than it needs to be, but damned if I can figure out what it is.

Anyway, I get it looking right in Firefox, then I look at it in MSIE6 (yes, I'm still using 6; however, many of these problems still apply in v7), and it's a train wreck. Some blocks are much narrower, others much wider, and the alignment is shot to hell. The only way I can make it work is to assign fixed pixel widths to some of the blocks -- but of course that defeats the intent of having the layout be 100% scalable.

What the hell am I doing wrong? What am I missing? Is it really possible to get a scalable all-CSS layout that works properly in both MSIE and Firefox? Or am I right in suspecting that the designers who claim you can do it all with CSS, without tables, just blowing smoke?

-- Jon W.