Silly and frustrating browser UI issues
Has anyone spent a few hours getting their app's UI to render correctly in all browsers?
How do you deal with the frustration where simple styles tend to work in one browser but not others ... and at the end of the day you invent a hack to handle it (in some cases that doesn't happen either), only after the time?
I'll wait for the day when all browsers can follow the same standard, until then I (and others) can learn from a few suggestions from people who do it often.
source to share
Don't emphasize, this is useless, and I think none of us will see that all browsers follow the same standard.
What am I going through before?
I am using Firefox on Linux for development. I have installed the WebDev plugin (https://addons.mozilla.org/es-ES/firefox/addon/60 ) to make CSS creation easier.
When my web application is close to completion, I try it in IE6 and IE7 (using Wine on Linux). Then I create a new stylesheet for each one, load it using IE conditional comments (http://www.quirksmode.org/css/condcom.html ) and start making changes one by one until both browsers are OK.
For other browsers (Opera, Safari, Galeon ...) the FF design will work fine.
In the end, I have three CSS: one for IE6, one for IE7, and one (original, valid and correct) for other browsers.
I think this is a better approach than writing dozens of hacks in your correct CSS and more flexible for the future (IE8 ...)
source to share
Today you can code in standard mode and only really worry about IE6's weaknesses, which are few compared to IE5. Sure, we'll all be happy when IE7 gets basic, but it's easy compared to yesterday's author. No more model boxes, for one ...
Luxury. At one time, we had to get up at -30px in the margins, clean t '<layer> s with our text editors, spend 20 hours a day down the server logs sniffing for IE3, and then when we got "I'm talking" it looks more like a <table nested within three more <table - s which Netscape 4 will destroy our pages, crash and send us to script int 'coal flood.
And you try to tell web designers about it today ... they won't believe you.
source to share
I always use Safari and Firefox for development and sometimes Opera if I feel like changing. But I always - always ! check every change against IE. All three of them are IE6, 7 and 8. I am using IETester for this.
Catching these nasty bugs right away makes your life much better than opening IE for the first time only when you've finished your job. Then it's almost impossible to step back and figure out where things went wrong.
I use conditional comments containing separate CSS (and sometimes javascript) for each IE. Yes, also IE8. This is still not entirely true. By the way, don't blindly expect Opera to work even if it's fine in Firefox / WebKit.
So, never design in IE. And get Firebug for Firefox. This is the best plugin for web developers.
source to share
You accept it, learn from it, and with a few years of practice knows what to do, when.
In every modern browser, but in IE, virtually none are visible to all but the most exotic. So keep it simple. Build iteratively against firefox with firebug. Conceptualize objects well, stick to standards. When you are ready to do the necessary hacks to fix IE. Never come back from IE.
99% of the time you will be able to fix IE just considering field models and floating point issues. Don't make the mistake of going back to the tables.
CSS is really zen.
source to share