Why websites look different in different browsers

Why websites look different in different browsers
(or why pixel-perfect design is not possible on the web)
Introduction

Print designers are able to lay out a page knowing exactly how the design will look when it's printed. Many people expect the same from web design but often it's not possible, practical, or even desirable, to build pages that look exactly the same on every browser.

When a print designer gives their page a 5mm border, selects Pantone colour 451 and the font Gill Sans 15 point, they can be sure their audience will see their design exactly as they planned it. Print designers and printers have a great deal of control over their medium. In contrast, the web designer has no absolute control and designing for the web is consequently very different. There are a wide range of external factors that will effect how a web page will look to the user.

These include:

* The user's computer system
* The preferences the user has set
* How the browser decides to interpret the page
* Whether the browser supports the code used on the page
* Bugs in the web browser

The user's computer system

The type of hardware and software you use on your computer will effect how a web page is displayed. For a start it depends on the operating system you use. PC's and Macs use a different dots-per-inch (dpi) measurement which means text usually displays larger on a PC. There are other text display differences - on Macs text is 'antialiased' which gives a smooth appearance whereas only the most recent PC operating system does this.

PC and Mac also use different screen brightnesses (gamma), and this means that designs will look lighter on a Mac.

Different operating systems use different sets of 'widgets' - things like buttons and text boxes on forms, and scroll bars on pages - so these elements will also look different depending on the platform you use.
Buttons display very square and blocky on Internet Explorer for PC
A button as displayed in IE5 on Win95
Mac OS X uses gel like buttons which look much nicer
The same button using Safari on Mac OS X

Print designers can use any font they wish - web designers can't. A web page can only use a font if it's installed on your system, if it isn't, the page will display your system's default font. For this reason, designers usually try to restrict themselves to the most common system fonts like Verdana and Arial. Any piece of text that must display in an uncommon or custom font - for example a strapline - must be embedded as a graphic.

Colour can also be an issue. Different monitors have different colour depths (the number of colours they can display), and simple factors such as the ambient light where a person's monitor is located can have an enormous affect on the perceived colour. Web designers only have around 216 colours they know will be available across all modern computers, so if your corporate colours are not amongst them, they may not always be accurately represented.

As you can see, the setup of your computer can have a big effect on how the size, brightness and colours of a design are displayed. The way certain page elements display depends on your operating system, and how text is rendered also depends on which fonts you have installed, as well as on the type of system you use.
User Preferences

It isn't only your computer system that effects how a web page displays; the way you have set your preferences will also influence what you see.

The screen resolution you choose will dictate how big everything looks and how much will fit on a page, with the most common screen resolution settings being 800×600 and 1024×768.
with a screen resolution of 1024x768 everything looks smaller and has more space
The learning in sussex site viewed at a resolution of 1024×678
with a screen resolution of 800x600 everything looks bigger and has less space
The same site viewed at 800×600. Notice that everything looks bigger and there is less room for the text.

A web designer may want to make sure that the text size on a page displays the same on different browsers but it's not possible to do this in any absolute way. Aside from the differences in text size created by screen resolution, text size can also be changed by the user. In any case, it's not desirable to fix the text size - if users find your text too small to read, you don't want to stop then from resizing it.

Most browsers give the user the ability to set a custom user style. This allows users to override how a website looks and gives them the ability to change things like background colour, text colour etc. This is most commonly used by people with visual disorders such as colour blindness.

Because it's difficult and sometimes impossible to tell what preferences a user has set on their computer, the way a page displays is often down to the users settings.
The browser interpreting how things should look

As if there weren't enough things conspiring to affect the web designer's masterpiece, the web browser also wants to get in on the act.

Each web browser looks at the code used and tries to interpret how the page should be displayed. Some browsers will display the page exactly as the designer intended and others won't.

Some browsers will add default styles to elements. To stop this happening the designer must turn these default styles off. For example, If you use an tag people using Netscape 6+ will see a dotted line appear under the abbreviation but Internet Explorer (IE) users will not.
a line of text showing that IE does not give abbr tags a default style
Internet Explorer does not style the tag
On Safari in OS X abbr tags are made italic
Safari on Mac OS X chooses to make tags Italic
Netscape 6+ gives abbr tags a dotted underline
While Netscape 6+ underlines tags

Most modern browsers are very good at following the rules a designer has set but there are always some exceptions. For example, if you are viewing this page using IE5 or 6 you will see a solid border around the sections on this page. For people using most other modern browsers you will see a nice dotted line. This is because Internet Explorer has 'chosen' not to display dotted lines less that 2 pixels wide, even though I've told it to show them in my style rules.

As you can see, web browsers do not render the design of a page pixel by pixel. What they do is look at the page and render it based on the rules that have been set by the designer and the defaults that have been set by the browser programmers. This is one reason why the same page can look different on different browsers.
The use of unsupported or non-standard code

During the early years of the internet, browser manufactures stuffed their browsers with features that weren't supported by other web browsers in a race to win market share.

Over time some of these features (such as image support) have become standard parts of HTML, while others (such as the marquee and blink tags) only ever worked on specific browsers.

For example, many web designers use HTML tables to control page layout. To allow people to make a table stretch the height of a page, IE introduced the 'height' attribute for a table tag. This is an attribute that was used very often. Unfortunately it wasn't a standard tag so Netscape and other browsers didn't support it.

The use of such non-standard code led to pages that only worked on one web browser, and even now you will see pages that state they only work in a certain browser.

Thankfully most modern browsers have decided to use a standard set of code. However, many web designers are still using non-standard tags which can cause display problems across a wide variety of browsers. By sticking to web-standard coding, web designers can help reduce these problems.
Bug's in the web browser

Finally, one of the biggest reasons for display differences is simply because browsers are buggy! One would expect big software companies to fully check and bug test before release but in reality this doesn't happen. It's a fast-paced industry and browsers are often rushed out before they're fully tested.

Some bugs are spotted and fixed quickly, but many seem to remain version after version. This was a real problem in the old version 4 browsers when new 'fixes' were being brought out on almost a weekly basis. This practice is still common today.

What a user thinks is a bug in the page is often more likely to be a bug in the browser. It used to be common practice for web designers to use workarounds (or 'hacks' as they are known) to get around these bugs. But as this would often cause problems in newer browsers, this practice has lost favour. If your browser is playing up it's worth downloading the latest version and seeing if that helps - after all, most browsers are free and easy to install.

These days the most common approach for web designers is to build a site with one or two core browsers in mind, ones that are known to be relatively bug free and use current web standards. If you design using this approach you help ensure that the site displays as well as possible in current and future browsers, while making sure that the content (but perhaps not necessarily the visual design) is displayed in older and more buggy browsers.
Conclusion

As you can see there are many reasons why a web page may not be visually consistent. Some of these relate to the user's computer and their personal browsing preferences, and others to the way browsers actually work - interpreting the designer's layout rather than displaying it pixel by pixel. Some of the biggest and most common display discrepancies relate to bugs in a user's browser.

Display discrepancies are a fact of life for web designers and web design buyers. By using web-standard code many of these issues can be dealt with and the increasing standardisation of the web will undoubtedly help in this respect. But unless we all use the same computer systems with the same preferences there are always going to be some differences.

Designing for the web requires a different mindset than designing for print. It's less about absolute layout control and more about content and information.

The web allows us much greater freedom with our content than print ever has. Once an item has been printed it cannot be changed, while the web allows us the freedom to change both content and design. It also gives your visitors the freedom to view your content in a manner of their choosing. To allow this freedom, some degree of layout control has to be given to the user. This means that pixel perfect design on the web is not just difficult - it's undesirable.