Has anyone spent several hours to get the UI of their application render correctly in all the browsers?
How do you tackle the frustration when simple styles tend to work in one browser but not others..and end of the day you invent the hack to handle it (in some cases that too does not happen), only after wasting your time?
I will wait for the day when all browsers can follow same standard, until then I (and others) can learn from few suggestions from people who do this frequently.
I recommend stocking up on porcelain goods (not too expensive) and store it within reach from your workstation.
I design in Firefox then test in IE rather than the other way around. FireFox is stricter so if it works there it is more likely to work in IE. Saves a little bit of the frustration...
You accept it, learn from it, and with a few years practice know what to do when.
Every modern browser but IE is pretty much seemless for all but the most exotic. Keep things simple therefore. Build iteratively against firefox with firebug. Conceptualise the objects well, stick to standards. When you're ready make the required hacks to fix IE. Never regress from IE.
99% of the time you should be able to fix IE only accounting for box-models and float issues. Do not make the mistake of falling back to tables.
CSS really is zen.
Don't stress, it's useless, and I think no one of us will see all browsers following the same standard.
What I survive to this?
I use Firefox in Linux for development. I've installed the WebDev plugin (https://addons.mozilla.org/es-ES/firefox/addon/60) to make easier the CSS desing.
When my web application is near to complete, I try it in IE6 and IE7 (using wine in Linux). Then, I create a new stylesheet for each of them, load it with IE-conditional-comments (http://www.quirksmode.org/css/condcom.html) and start to make changes, one-by-one, until the design is OK in both browsers.
For other browsers (Opera, Safari, Galeon...) the design under FF will work fine.
At the end, I have three CSS: one for IE6, one for IE7 and one (the original, valid and correct one) for other browsers.
I think it's a better approach than writting dozens of hacks in your correct CSS, and more flexible for the future (IE8...)
Today you can code in Standards Mode and only really have to worry about the foibles of IE6, which compared to IE5 are few. Sure, we'll all be happy when IE7 is the baseline, but compared to yesterday authoring is easy. No more box model hacks, for one...
Luxury. In my day, we had to get up at -30px in the margin, clean t' <layer>s with us bare text editors, spend 20 hours a day down t' server logs sniffing for IE3, and then when we got home to our box — I say ‘box’, it was more like a <table> nested inside three more <table>s — us Netscape 4 would kill us pages by crashing and send us to script int' coal scuttle.
And you try and tell that to the web designers of today... they won't believe you.
I always use Safari and Firefox for development, and occasionally Opera if I feel like a change. But I always - always! check every change against IE. All three of them - IE6, 7 and 8. I use IETester for this.
Catching those nasty bugs straight away makes your life that much better, rather than opening IE for the first time only when you've completed your work. Then it's almost impossible to backtrack and figure out exactly where it all went wrong.
I use conditional comments feeding separate CSS (and sometimes javascript) for each IE. Yes, also IE8. It's still not quite there. By the way, don't blindly expect Opera to work, even if it's good in Firefox/WebKit.
So, never ever design in IE. And get Firebug for Firefox. It's the best plug-in ever made for web-developers.
I start with Yahoo's reset/base CSS files (they are tiny). They make styles consistent between browsers from day 1. Then when I add custom styles, they are typically well received and consistent in all browsers.
Of course you'll still need the occasional hack for this and that.