Browsers

Cross Browser Compatibility

What is cross browser compatibility?

My definition is, the ability to “code” a website/ web page that looks or renders the same on all
browsers. This may be called “pixel perfect” web design as well. The goal for all web designers
is to have their coded work display the same across all browsers. however, this is easier said
than done because just about every browser has their little differences which may be adding
padding around an H1 element or margins to an unordered list “ul” tag and so forth. Not all
browser are set up exactly the same. So, a good way to combat this issue is to zero everything
at the beginning of your css style sheet. If you decide to use a reset I would recommend using
the “Eric Meyer Reset”. You can visit Eric’s website to copy the most recent updated version of
his reset.

Once you have the reset in place, simply design your website as you normally would. From my
personal experience, the reset works but is not 100%. I still see some differences in some
browsers but by and large it does help to have the reset.

Now, for me knowing that I may still have some rendering differences from browser to browser I
design my websites knowing that there may be browser issues. I try my to allow for slight
variations between elements at times, however I want the main structure to stay intact. I
understand some elements may be a few pixels off but I expect the page not to break.

Industry Standards – Lithography

Web designers are not alone in this. If you have ever designed anything for full color printing
(especially lithographic printing) which would mean a real printing press with real ink,
plates, blankets, rollers and a skilled craftsman etc. You would understand that this
lithographic printing process has its short comings as well. Some papers stretch more than
others, some plates stretch more than others and of course some press adjustments may move
during the press run. Paper stretches, plates shift which can cause your design to have gaps or
breaks in the final printing. Press operators call this misregistration. What designers can do
to make life easier for the press operator and reduce paper spoilage is to use chokes and
spreads for any colors that need to fit. The chokes and spreads allow for a slight shift of
possibly a plate and even some slight paper stretch while maintaining the integrity of the
graphic design. In other words the printed piece will still be acceptable and the press operator
does not have to keep making adjustments etc. This is common in full color printing and a
necessity for graphic designers and/or the prepress department to get this right before it goes
to press.

The same mentality goes for web designers. Design your websites knowing their are browser
inconsistencies. Use a reset and code from their allowing some room for a slight shift. Don’t
design in a way that looks horrible if you have a browser shift.

Music – Standards

In the music industry everything is tuned to 440 which is “A”… so if want to record in a
studio across town and the other band members already laid down their tracks two weeks ago, just tune up to 440 and you will be good to go….440 is an industry standard, four color process printing is an industry standard…Why can’t browsers accept an industry standard..Some day we may see that, hopefully soon…

Hope for the Future

Today, 2011 the modern browsers are much more in tune with each other. I hope as each new
version or new browsers come on the scene they will focus on browsing and leave the designing to the web designers. You would not expect a press operator to alter your graphic design or the recording studio to play with your tuning or tone…Why should the browsers dictate how an element or tag renders….As a web designer I want to decide how my website design looks….

IE 6,7,8 does not handle floats or display inline block the same as other browsers even with a reset….

This article is a work in progress. I will be adding to this as time permits…