Browser Rendering Differences - A Problem?

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