What Causes Browser Display Differences?
1. Different Browsers:Your Web browser is a translation device. It takes a document written in the HTML language and translates it into a formatted Web page. The result of this translation is a little like giving two human translators a sentence written in French and asking them to translate it into English. Both will get the meaning across, but may not use the same words to do so.The basic rules for translating HTML documents are established by the World Wide Web consortium, which publishes the official HTML standards. But there's considerable room for interpretation within those ground rules.
2. Different Browser Versions :The major difference between two versions of the same browser is their support for newer portions of the HTML language. A new browser is generally better at displaying Web pages than an old one.However, Internet users tend to upgrade their browser based on the addition of new features, like email integration and instant messaging. If a user doesn't care about these features, they're happy to keep surfing the Web with their old browser.That presents a problem for Web designers, because for some length of time after the new browser appears, a significant minority of people will still use the previous version. So rushing to build pages with the HTML features supported by the new browser will have to wait.A good rule of thumb is to design your pages to work for the last two versions of the major browsers. While a handful of people use browsers older than that, their numbers aren't large enough to justify the sacrifice required to support them.
3. Different Computer Types :The Macintosh is still used by 12% of computer users, and has a very loyal following among graphic designers and publishers. In theory, if you view your page on both a PC and a Mac using the same version of the same browser, it should display the same, right?
In practice that's rarely the case. There are three reasons for this:
Font Availability. When you tell your Web page to use a particular typeface, such as "Arial," you may not always get the font you want. Fonts are a computer resource, and not all computers have the same fonts as your computer. That's true even between different PCs, but it's especially true between the PC and the Mac. If the typeface of your page suddenly changes between these computers, you've probably used a font that isn't available on both computer types. Click here to find a list of safe fonts.
Font Size. The Mac will generally render your typeface in a smaller pixel size than the PC will. That's especially true if you use the FONT tag to set your type size, since this tag uses abstract units to define size. You can avoid this problem is you use Cascading Style Sheets to set your font size in pixels. Click here to learn more about font sizes on the PC and Mac. Internet Explorer. Microsoft outsources the development of Internet Explorer for the Mac, and so to a large extent this is a different browser from the PC version. In particular, the Mac version of Internet Explorer is prone to quirks and bugs that you won't see in the PC version. If you check your Web page under only one browser on the Mac, do so under Internet Explorer!
4. Different Screen Sizes :If you don't test your pages using different screen resolutions, your page may be stretched to fit a large screen, or be cropped to fit a small screen.Many experienced Web designers use HTML tables to control their page layout, yet they design their pages on large, 1024x768 pixel screens. When these pages are displayed on smaller computer screens, the browser may not be able to fit all the content onto the screen. In these cases, the content will scroll of the right of the page. While this may not sound like much of a problem, users hate scrolling left and right to view a page.
5. Different Font Sizes Most browsers allow users to customize their default font size. Many users who work on computers all day do this to reduce eye strain. As a result, user preferences may cause the typeface that you used to design your Web page to increase as much as 50% larger in a user's browser. This increase in font size can hurt many carefully-planned page designs.
6. HTML Errors:Whether you're an HTML coder who builds Web pages by working with the raw HTML tags, or a designer using a WYSIWYG editor like FrontPage or Dreamweaver, the odds are your finished Web page will contain HTML errors.An HTML error is some spot on your Web page where you've violated the official rules of HTML. For example, you may have two tags that overlap one another in a way that the standards say isn't legal.In practice, the major browsers are robust and forgive many of these HTML errors. But not all browsers forgive the same errors. So your favorite browser may display your Web page without error, but another browser may be seriously affected by the same error.
7. Browser Bugs :As you've probably seen by now, building a Web page that displays well on all browsers isn't easy. To make matters worse, sometimes you've done everything right, and your page still doesn't display correctly under one specific browser. It's not your fault - you've just encountered a browser bug.
What you can do?
Set a Goal First:Understand that it's hard to build a Web page that displays perfectly on every version of every browser running on every computer. And doing so may require you to leave out features that you really, really want to have on your Web page.So the first step to solving browser compatibility problems is to determine which browsers really matter to you.
2. Avoid the Cutting Edge:Many Web designers feel they have to build cutting-edge features into their Web page. That's a bad idea, because cutting-edge features are rife with browser compatibility problems, not to mention the impact they have on your page load time.Including cutting-edge features in your site doesn't guarantee compatibility problems, but it greatly increases the chance of browser display errors. If you really feel you need to include these features, it's essential to test your pages under all major browsers.
3. Pay Attention to Your Browser Compatibility Report: HTML errors are the leading cause of browser display problems. Making sure your Web pages are error free is one of the most important steps you can take to solve browser display problems.
4. Validate Your PagesNext to HTML errors:Compatibility problems are the leading cause of browser display errors. We've already warned you about including cutting-edge features in your site, but compatibility dangers extend to all aspects of HTML.
5.Trial-and-Error Debugging: Make a copy of your Web page so you can restore it to its original form if you need to. Debug this page, not your original Web page.Isolate the problem on your copied page. Do this by eliminating as much of the page as you can. Is the problem at the top of your page? Then throw away everything but the top section of the page.
