WWW FAQs: How do I make my website cross-browser compatible?

2006-07-11: "cross-browser" compatibility means compatibility with all of the major web browser software. Today any website that uses the normal standards of modern web design, like HTML 4.x, XHTML, JavaScript and CSS, is going to work just fine with the major web browsers (Internet Explorer 6, Firefox, Safari, Opera, and Internet Explorer 7). Not all of your style sheet settings are likely to work perfectly with all browsers unless you actually test your pages with multiple browsers, which is recommended, but it is rare for a page to be completely unusable with any major browser unless it relies extraordinarily heavily on JavaScript and no actual testing has been done. Just follow these recommendations:

1. If you use Microsoft Word, make sure you upload all of the image files that go with your image. Many users are confused when their images don't work in anything but Internet Explorer. That's because Microsoft Word saves images twice: once in a proprietary format other web browsers know nothing about, and a second time in standard formats like PNG, GIF and JPEG. If you don't upload all of the image files, which will be in a subdirectory called index_files if your page is called index.html (and so forth), then your images will be broken in anything except Internet Explorer.

You can filter out the offending "VML" tags, and the proprietary Windows Metafile images they refer to, using Microsoft's free Office 2000 HTML Filter. Then Internet Explorer and Firefox will be looking at the same "normal" HTML elements and you'll know right away if you haven't uploaded something properly.

2. Do not use Microsoft Publisher. Microsoft Publisher 2002 and later uses VML in a proprietary way— meaning it works only in Internet Explorer. This is similar to the Microsoft Word problem, but there is no effective way to remove them without losing all page layout. In any case, Publisher is not intended as a professional web design tool. Use professional tools like Dreamweaver or write your own HTML and CSS.

3. Test your site with Microsoft Internet Explorer, Firefox, and Internet Explorer 7, at a minimum. You should also test with Safari on a Macintosh.

3. Include plain-text links to your content and text alternatives (alt attributes) for your images that contain text or are crucial to understand the page. Otherwise browsers for the blind will not work. Equally important, search engines will not index your page properly. If people can't find you in search engines, they pretty much won't find you at all.

4. Don't build your whole site in Flash. While most people have Flash, browsers for the blind, search engines, handheld devices and users who do not like Flash will completely miss your site. You should use Flash for accent, pizzazz, and entertainment, not as your entire design.

5. CSS provides powerful ways to control the appearance of a page— but also leads to serious browser incompatibilities. You can limit these problems by using the HTML 4.01 Strict document type. When you design in "strict mode," Internet Explorer 6 and above will show behavior much closer to that of Firefox, Safari and other modern browsers. But only if you specify the strict DOCTYPE at the very top of your page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Otherwise, Internet Explorer runs in a "quirks mode" where it attempts to emulate the behavior of older browsers. Strict mode greatly improves cross-browser consistency of page layout even with Internet Explorer 6, and with Internet Explorer 7, compatibility is further improved although Microsoft unfortunately failed to implement the entire standard.

Strict mode does introduce some changes that may come as a surprise to those who have designed only for Internet Explorer in the past, without testing their pages in browsers like Firefox that aim to be standards-compliant even without a DOCTYPE. You can learn more about the differences by reading about quirks mode and strict mode on the excellent website www.quirksmode.org.

Share |

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!