CoffeeCup - HTML Editor, Flash & Web Design Software

Ah, the age old question. "Why doesn't my webpage look the same in all browsers?" Since the Dawn of Time mankind has sat at the keyboard, confused and bewildered at the magics of the World Wide Web and how a webpage can look perfect in one web browser, but look far worse in a different browser.

Even worse, sometimes a web page can look fine in just about every web browser on one computer, but other computers will render it differently in those same web browsers. So what exactly is going on?

Some Things to Understand

Before we continue, there are some things that a web designer must understand. They're technical things; things web designers have no control over. (A lack of control is a constant theme in web design.)

There is a standard for how web browsers should display pages.
There is an organization called the World Wide Web Consortium (W3C) that sets a standard for how all web browsers, like Internet Explorer and Firefox, should display HTML. The problem is that these standards are just guidelines, and the programmers who create web browsers are free to interpret the guidelines and build their web browsers the way they think it's best to render HTML on your computer screen.

There is some debate over which browser best follows the W3C's standards, but it still boils down to the fact that no web browser follows the standards 100%, and so the same web page will look slightly different (or greatly different, depending on coding) in different web browsers or even different versions of the same web browser.

This is why a web page will look different in Internet Explorer and Firefox. Now imagine how amplified this problem can get when you consider that these are not the only two web browsers out there? Just to name a few, there are also these popular browsers: Netscape, Safari, Opera, and Konqueror. (This is still not all of them! Want to see how many different web browsers there are? Take a look at this comprehensive list of all these web browsers, and imagine how many different ways your web page can be rendered.)

As if this wasn't bad enough, we still haven't considered the various operating systems out there. The popular operating systems out there at the moment are Windows XP, Windows Vista, Mac OS X, and various flavors of Linux, such as Ubuntu, Red Hat, and Fedora/Fedora Core. Each of these operating systems has a version of most of the popular web browsers above, magnifying the problem of web page rendering exponentially. (And again, this is not the full list of operating systems out there. You may still get people browsing your page on Windows ME, 98, or even 95, just to name a few! Since we were nice enough to include the list of web browsers above, care to peek at the list of operating systems?)

And guess what? There's more. Most computers have the option to change their screen resolution. Screen resolution gives monitors more or less space to work with according to the number of pixels they display. In a nutshell, this restricts the space a browser on a particular computer has to work with. There are dozens of different resolutions for each of the above operating systems.

Are You Sitting Down? Here Comes the Harsh Part.

The harsh reality is that you, as a web designer, have no control over any of this. It's impossible to get your web page to look the same on all web browsers.

...but!

But do not be discouraged. Web designers have already created truly awesome webpages despite all of the above, and there are things you can do to make your pages appear as similar as possible in multiple browsers. Web design principles exist that you can learn and apply in your design of web pages to help your pages appear how you want them to.

We have another article that you should take a look at which describes a few of these principles and provides some basic links. In addition to that, we strongly recommend reading the following website, which goes into great detail about web design's limitations and how you can work with them rather than against them to create a killer web site: Visit Absolute Positioning.com.