The Browser Butchered My Website! // Dream Seed Multimedia, Lancaster, PA

The Browser Butchered My Website!

Written by Adam J. Barkafski Added: 01 July 2008

Have you ever had the misfortune of having a finished website and proudly showing it off to your family and friends who are at their own computers, only to have someone call you and ask, “Why is there a big blank space on the right?”

You answer, “The main text is there.”

Then, you get, “Where are the navigation links?”

You answer, “Across the top.” You also start to wonder if your family and friends are going blind; after all, you see these things as clear as day on your own computer!

The types of questions can go on and on. And after you’ve spent good time and money putting together your new website that makes you proud, these are not the questions you want to hear, especially when you begin to wonder what potential customers will see!

So what’s really going on?

There is no one-size-fits-all solution, but one possibility could be the viewer’s internet browser. An internet browser is the piece of software you use to surf the internet. Chances are, you are viewing this article on the internet right now, and you’re doing it through a browser, most likely Internet Explorer, Firefox, or Safari (in 2008). Of course, there are many other browsers out there: Opera (my personal choice), Netscape (which has officially ended), Flock, and on and on.

As with everything else in life, there are choices for viewing the internet, and most of them are free and easy to download. Each offers different features and perks as well as a few drawbacks—all dependent on your personal opinion.

But why does my website change in different browsers?

The answer to this question is long, but I’ll try to keep it brief. It’s because of a war.

In the mid to late 1990s, as the internet was grabbing everyone’s attention, Netscape was the browser of choice. Then, Microsoft introduced its own browser, Internet Explorer. As the World Wide Web was still a new medium (at least for mass consumption), there wasn’t much of a standard way of designing how a website should look. So Netscape and Internet Explorer developed their own ways of rendering a website and also introduced special proprietary code that would work only in one browser or the other. This fight for dominance between Netscape and Internet Explorer is referred to as (cue dramatic music) the “browser wars.”

Quite simply, this meant that web designers and developers unintentionally created websites that would look different depending on the browser used. Some designers used special workarounds to maintain a consistent look across browsers. Others put messages such as, “This website is best viewed with Internet Explorer,” on their websites and ignored the other browsers.

Around this time, the World Wide Web Consortium (abbreviated as W3C) developed standards so that websites would look consistent across all browsers. Of course, the browsers had to implement these standards. However, when Internet Explorer finally dominated the market, Microsoft left Internet Explorer 6 as their latest browser from 2001 through 2006, quirks, non-standards compliance, and all. (Internet Explorer 7 launched in the fall of 2006, still without full standards compliance but markedly improved over its predecessor.)

While Internet Explorer 6 stagnated, other browsers entered the market, such as Firefox, Opera, and Safari, all following standards compliant rendering as best as they could. Of course, minor quirks still exist, but all in all, they followed the standards and put their marketing into features and “add-ons,” rather than how a website would look.

So what’s a website to do?

The best piece of advice I can give is to plan ahead. Make sure you or your designer take care to use standards-compliant code when creating your website. W3C standards compliance will help ensure that your website will render correctly now and in the future. There are also fixes, hacks, and other workarounds to use to help your website render as you wish it to appear in a certain browser; most of these workarounds are for Internet Explorer since it is the most behind in terms of standards compliance. However, try not to rely too heavily on hacks in particular since they may cause problems in the future.

It’s also wise to test your website in as many different browsers as possible before going live. This exercise will show you where you may need to fix things before launching. Incidentally, www.browsershots.org allows you to type in the address for a web page, and it will show you how it looks in almost 70 different browsers (this may take up to an hour or more).

If you plan ahead and have your website designed to be cross-browser compatible, you will save yourself from answering embarrassing questions later. And you will also allow more potential customers access to your website!

Category: Website Design and Hosting