As I’m working on my book one topic that I’m trying to emphasize keeps coming to mind – that topic is the difference in how browsers will render the same page.
I think that far too many people see this as a huge problem, when it’s not. I also think this is the whole reason that so many people got started developing this plethora of CSS hacks we are left with today.
So… let me say this loud and clear:
Your site -does not- have to look identical in all browsers. Your site -does- need to be functional (and hopefully attractive) in all browsers.
If your footer is 2 pixels taller in another browser.. so what? Does the text still look fine? Alignment is still okay? Did the design completely lose it’s quality because of 2 pixels? If it’s built well, I rather doubt it made a huge difference. Who cares if your font of choice isn’t rendering on the operating system of your viewer… does an equally nice one render? If not, specify better alternative font families, don’t turn to dynamic font graphic generation to solve something like that unless it is -really- vital to the design. And I mean -really- vital. Something would have to be darn important to waste precious load time rendering and loading extra graphics when you know you have only a few seconds to capture a viewer in the first place.
So many people stress about because IE cannot handle so many of the nifty little CSS things like the :after and :before. So what? Use them on non-vital things. The important thing about making your site accessible to all people isn’t that it be exactly the same to everyone visually. It’s that you need to ensure that your design is close enough to the same, but even more importantly… that all the -content- is available to everyone regardless of the method they use to access your site.
Now, don’t get me wrong. Some things that happen in different browsers can have ugly results. No designer wants their pages to be ugly. But they don’t have to be identical. I have watched people tweak a design for hours and hours just to get it all perfectly the same in several different browsers. I’ve done it myself many times, until I realized that the little things (small, insignificant non-content things) … really don’t matter in the long run.
Overall, I think that a non-hacked CSS is better than a hacked one. If you can avoid using hacks just to solve minimal issues, then do it. I’m not talking about major things like a div that is floating around aimlessly and overlapping your content. I’m talking about minor differences in rendering. Hopefully, people will start seeing these differences as less of a stumbling block, and more of an opportunity to use varying technology while still providing a good user experience.
~Nicole
Guess, the biggest prob between firefox and IE is the difference in border, margin and padding and how these are calculated to the innerdimensions of the element.
But at least there should be always a way to fix them similar.
What I really do not understand is the floating of inputs in Firefox.
<div style="float:left"><input></div>will also not work at all.
They run out of function, cause the events are rendered to a tiny line somewhere else. So the last choice is the use of a table-element 🙁 .
btw. Nicole, why don’t you enter newposts anymore?
Are you busy with your book? At least the new html 5 should be worth a new post.
Good story, is what I think. It is 2011 now and this is an old article but true. I don’t use hacks for style sheets, stop supporting IE8 and lower (it must working ok in IE8 but doesn’t have to be that nice).
When the user is using a browser that is too bad in rendering, show it and notice the user that they must blame the browser (or company) and not you. At this time it is easy to find better alternatives so stop the bullshit hack shit, don’t try to solve problems of the manufacturer of the browser, don’t make it too easy for browser creators, show to users that it is a bad choice (just a little notice at top of the page). When every developer follows these rules, all hacks can be history and stimulate browser developers to be the best.
But, you can only do this when you as designer/developer follow the W3C guidelines and without (any html/javascript etc.) errors. When you do this there is no reason to blame you, only the company of the browser.
It is really a Microsoft thing to adapt there thoughts, make the best of the worst but it not 1980 anymore, we must go on and stop this bullshit to spend all your time and money (you cannot send the bill) to get a piece of crap to work, users must see the difference and it is easy to upgrade or use another browser simply by downloading it.
When it looks different to the design in a browser and you follow standards, so be it.