[Home]Browser differences

HomePage | RecentChanges | Preferences | Newbie Help

Why Do Different Browsers Display My Page Differently?

There are a number of causes for this problem, which happens all the time. They are either your fault or the browser's fault. Either way, most are fixable. Here are a few problems that can cause discrepancies between different browsers.

Bad Code

This is the most common cause of the problem. Your code might not be true, perfect, HTML. Did you forget a quotation mark? Did you forget a </table> tag? Whatever you did, the friendly place to check your HTML is at http://htmlhelp.com/tools/validator/ .

Proprietary Code

This is very similar to bad code. You might have put a greusomely annoying <marquee> element or tried to use the BACKGROUND attribute on a TABLE tag. Maybe you used LEFTMARGIN and TOPMARGIN attributes in the BODY tag, IE-only code that goes unrecognized by Netscape. http://htmlhelp.com/tools/validator/ will catch any code that is not part of the official specs and tell you about it.

Stupid Browsers

In some cases, the browser is just too stupid to understand perfectly valid code. Netscape 4 dies when you feed it certain types of CSS. Netscape 4 also doesn't understand the IFRAME. It completely ignores it! You can either let the browser act stupid, or cripple your page so that it works everywhere.

Browsers Treating Code the Wrong Way

This is a problem that IE is often guilty of. For example, it thinks that the color CSS property should change the color of a horizontal rule. However, it is the background-color property. The morally right thing to do is to use what is technically right, and letting some browsers ignore it at their own expense. Another solution is to use the technically correct way, and combine it with the IE way, so it works better in more browsers. Here is some example CSS code:

Internet Explorer's Way:

 hr { color: blue; } 
 /* IE will make the HR blue.
 Netscape and Opera will do nothing with it, because
 the color property changes the TEXT color */

The Right Way:

 hr { border: 0; background-color: blue; }
 /* Netscape and Opera correctly follow this CSS and
 make the HR blue with no border. */

The Happy Compromise:

 hr { color: blue; border: 0; background-color: blue; }
 /* Now NS, Opera, and IE are happy. */

Back to HTML Browser Problems

How many of your visitors do you figure will open NS, MSIE, and Opera side-by-side to make display comparisons?

If you want pages to display identically across all browsers, you are dealing with magic, not HTML. Convert the page to Adobe Acrobat PDF. Provide a link for visitors to download Acrobat Reader.

HomePage | RecentChanges | Preferences | Newbie Help
This page is read-only | View other revisions
Last edited April 2, 2002 7:07 pm (diff)

This FAQ is happily hosted by Betadome Digital Media