Why Does My Website Look Different in Different Browsers?

"Why does my website look different in different browsers?"

We get this question a lot and thought it might be a good idea to run down the major causes. Bottom line: No matter how carefully you check for browser compatibility, differences at the user level make it virtually impossible for a web page to display exactly the same way for everyone.

This post will give you an overview of site display issues, and help you respond when your customers have a problem.

Hardware Issues

A computer's graphics card allows users to adjust brightness, digital vibrance, contrast, image sharpness, gamma, and other settings that affect color. Depending on the settings, a user will see different colors or tones for all elements on a web page, including images and fonts.

Furthermore, most monitors have color settings independent of the computer's graphics card. This creates even more variables in how colors appear on screen.

The display resolution setting of a monitor affects the appearance of a web page as well. As a rule, we design sites to display optimally on a setting of 1024x768 and up. Pages will not display optimally at lower resolutions. As you can see from these browser display statistics, 1024x768 and up covers 99% of current users. However, if a site is designed for, say, 1280x1024 resolution, it may not display properly on lower resolution monitors.

Software Issues

A user's operating system, installed fonts, and browser type all have an impact on how a web page displays. Some of the issues and manifestations get rather technical and specific, but here are a few common issues.

Operating System

Certain elements on website forms sometimes appear differently to Mac and PC users, select boxes in particular. This issue can be overcome with a properly customized design

ClearType, Microsoft's advanced software for sub-pixel rendering, displays fonts with an ultra high level of smoothness and sharpness. Depending on whether a user has ClearType on or off, fonts will display sharply, or not as sharply. ClearType is disabled by default on Windows XP and turned on for Vista and Windows 7, so PC users are sure to experience fonts quite differently. Mac users have an LCD font smoothing setting which affects the appearance of fonts, again creating a difference in visualization.

Installed Fonts

Websites are designed, or should be, with what are called "font stacks." What this does is create a default font for display; if a particular user doesn't have that font loaded on his/her computer, the display defaults to the next font in the stack, and so forth. How the stack matches up to the computer's fonts determines how a website will be seen on that device.

Browsers

Browser differences are probably the biggest culprit in web display inconsistency. Every browser has a "layout engine" that interprets a site's CSS code and converts it into a visual image of a web page. Most display issues occur in various versions of Internet Explorer, which has a still-hefty 20% browser market share. Common problems include:

• Rounded corners appearing squared off in IE
• Shadows and rollover effects being ignored in IE
• Blog sidebars being pushed to the bottom in IE, because the layout engine automatically widens a page's pixel width for certain page designs
• Top navigation elements being pushed to the second level in IE, for the same reason as above

What to Do if You Get Complaints about Your Site

There's no need to be flummoxed if one of your customers calls with a complaint about how your site looks. As you can see, there are many possible explanations, none of which has anything to do with your competence!

The first thing to do is find out what browser your customer is using. If he/she is using IE, suggest they switch to Chrome or Firefox: display issues may disappear doing that and nothing else. If the customer is using an old version of IE -- IE6 or IE7 -- urge them to upgrade to a newer version.

If the browser doesn't seem to be the problem, we like to get a screen shot of what the user is seeing, and have our web developers take a look. Usually, they can diagnose the cause from there.

Sometimes, design oversights can cause a display problem; if that's the case, a screen shot usually reveals that as well.