Cross-Browser Compatibility

Web Design :: June 21st, 2009

Web Browsers Don’t Necessarily Think the Same Way

For those who may not know, a web browser is computer software that displays internet websites on a visitor’s computer. Internet Explorer, Safari, and Firefox are commonly-used web browsers.

Just what is “Cross-Browser Compatibility”? Simply stated, it’s the ability of a website to display and function properly in a variety of commonly-used web browsers. This is very important to a website owner that wants to reach the maximum intended audience. Unfortunately, a website doesn’t always look the same in all web browsers, since browsers don’t always agree how the code should be interpreted and displayed.

11worth.com in Internet Explorer 6

11worth Design and Cross-Browser Compatibility

How does cross-browser compatibility apply to sites developed by 11worth Design? First of all, this site, 11worth.com, is designed to display the same in current browsers such as Internet Explorer 6, 7, 8, Safari, and Firefox.

Now for some history…

Internet Explorer 5.5

11worth.com in Internet Explorer 7

Internet Explorer 5.5 was in vogue when I started designing web sites, and there was a tendency to make things work only in IE5.5. The percentage of visitors using other web browsers was very small, and relatively few people were affected. I hand-coded my sites to W3C standards anyway, so it wasn’t a big deal as long as the code validated.

11worth.com displays reasonably well in Internet Explorer 5.5, save for the horizontal menu display. The menu is still functional, however the look is different. A small price to pay for such an old browser.

Internet Explorer 6 (and Firefox, and…)

11worth.com in Internet Explorer 8

Internet Explorer 6 came along, and for the most part there were no changes necessary from IE5.5, assuming one stayed with Microsoft’s web-browsing creations. Other browsers began competing directly with IE6, however, most notably Mozilla Firefox. Internet Explorer was no longer the only browser in town.

Code that validated and made IE6 look good didn’t do as well in Firefox, sometimes to the point where Firefox wouldn’t display properly at all. It was back to the drawing board. Turned out IE would display code by its own rules. Firefox, on the other hand, was a standards-compliant browser from the ground up, and therefore displayed the same set of code the way it was meant to be displayed.

11worth.com in Firefox 3.5

So…I began to produce websites that used valid code to display properly in both IE6 and Firefox. It was often challenging, to say the least.

Internet Explorer 7

Then came Internet Explorer 7. It was again necessary to adapt code, because IE7 came with its own set of rules. What a surprise. In this case, sites that displayed well in IE6 didn’t do as well in IE7, since IE7 was designed to be more standards compliant than its predecessor. IE7 and Firefox, for the most part, behaved the same (notice I say for the most part…if you code web sites, you know what I mean).

11worth.com in Safari 4.0

Internet Explorer 8 and the “Wayback Button”

Time to relax since all is now good? Think again. Microsoft came out with Internet Explorer 8, the “end all and be all” of browsers. They have a button in the toolbar that when clicked, puts IE8 into IE7 Compatibility Mode. The need for such a button says it all. One must make selective use of Compatibility Mode to make those older sites look good.

Why? IE8 again changed the rules (at least as far as IE7 and below goes), which often requires code tweaking in IE7 (and below) to render well in IE8.

Fortunately, at long last, IE8 appears to be the most standards-compliant Microsoft browser to date. Coding for IE8 and Firefox is just about the same. Looks good in Safari as well. Woohoo!

Still, the primary goal is having any website display properly without having to use that dreaded “wayback” button…

W3C-Compliant Code Makes Better Sense

The bottom line is this: Writing W3C-valid code for display in the latest web browsers is THE only way to go. Relying on non-compliant code puts a site owner at the mercy of the next browser version “upgrade”.