The Straight North Blog

Back to Blog

Why Does My Website Look Different in Different Browsers?

Posted by:

Consistent Browser Display Is Doggone Difficult


“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 1024×768 and up. Pages will not display optimally at lower resolutions. As you can see from these browser display statistics, 1024×768 and up covers 99% of current users. However, if a site is designed for, say, 1280×1024 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.

Back to Top

10 Responses to Why Does My Website Look Different in Different Browsers?

  1. Hello Brad,

    Very good post covering most of the aspects of browser rendering of web pages. It is a very important issue and it needs to be checked before making the website live.

    It requires effort and time to write different css for different browsers but its an important issue as other factors like hardware,type of Operating system used is not in webmaster’s hand and css can be handled by the webmaster to render the webpages uniformly in all browsers.

  2. Why my website looks different on the same machine, with the same browser, using a different connection?

  3. Guest Author

    Hi Roberto,

    Your website should display the same despite the connection. The Internet connection has nothing to do with the display. The only factors that would affect display would be the browsers; code affects display, a connection does not.

  4. Hi my website looks horrible on internet explorer, Please HELP!!!

  5. I can’t seem to figure out what i did wrong :/ it looks fine in all browser except for internet explorer. Please help, this is for my church and I feel bad :/

  6. My website looks different on a Windows 8 and a Mac. It actually looks better on a Mac, perhaps I should change the browser on Windows 8.

    • Straight North Blog Contributor

      Hi David,

      We would suggest upgrading to Chrome for Mac.

  7. Looks fine for me in google chrome but my associates in New York it looks like a list with broken links any ideas?

  8. hi,

    I’ve just started a new blog, an I’ve gotten a new template but im having a problem with internet explorer. My blog shows up differently on IE then google chrome or safari. I dont know what to do to change it so it looks like the blog layout on chrome. I cant really tell my readers to not use IE for my blog. Is there anything I can do.

    • Lisa Zatulovsky

      Hi Lucy,

      Thanks for your question. We would recommend contacting a web developer to take a look at your site to help you make the necessary changes.

Leave a Reply

Your email address will not be published. Required fields are marked *


+ eight = 15