AbleDesign - Tutorials
Web Design Tutorials - Advanced Design Considerations
Browser Compatibility
This tutorial will cover some of the basics of browser compatibility. You can probably guess pretty well what browser compatibility entails based on the name. In a nutshell, it means ensuring that your pages will look the same or acceptably similar in as many browsers and browser versions as possible. The more creatively you choose to design your pages, the more this will become an issue you must address.
We will begin by looking at the issues faced by the design of the pages you are currently looking at. If you have ever wondered how to make your page have zero margins, i.e. the page contents run right up against the edges of the browser, the secret lies in the body tag:
<BODY BGCOLOR="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN="0" LEFTMARGIN="0">Not all of those tags are required for each browser, but you will eventually become painfully aware that the two major browsers, Internet Explorer (IE) and Netscape, do not always use the same HTML tags. Since they ignore those tags that they do not use, specifying all of them covers your bases. However, consider another important factor: version 3 and older IE and Netscape browsers do not recognize any of the margin tags. The following two screen captures represent this situation and another one (image stretching, which will be explained shortly):
Before
After
There are two things going on in the Before picture:
- Netscape 3 will not allow the blue border to be placed against the edge with a zero margin setting, other than the left side, which is actually a background image (background images always start from the furthest left and top portion of the browser screen). That is what causes the top left and top right curved blue images to be pushed down and in. Very ugly.
- Version 4+ browsers allow you to stretch images to fill an area that is a variable or fixed size. That is the technique that is used to stretch a 1 pixel wide gif image the width of the screen at the top and bottom. In the Netscape 3 screen capture above, the large blank gap between the top left and top right blue images is due to the browser not allowing for the center image to be stretched across. Sure, you could have the top blue portion set to a fixed width (as you can see from this page, it is set to 100% of the screen width) and simply use a correctly sized image to fill that space, but you would still have the ugliness of the non-zero margins to take into account.
The solution in this case was to use some JavaScript to determine if the viewer's browser could handle the stretched image, i.e. if it is version 4 or higher of Netscape or IE:
<SCRIPT LANGUAGE="JavaScript">
<!--
if ((navigator.appVersion.indexOf("MSIE") > 0 && parseInt(navigator.appVersion) >= 4) || (navigator.appName.indexOf("Netscape") >= 0 && parseFloat(navigator.appVersion) >= 4)) {
document.write("<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" height=\"40\"><tr><td width=\"130\" valign=\"top\" align=\"left\"><img src=\"http://abledesign.com/images/top_left_b.gif\" height=\"40\" width=\"130\" border=\"0\"></td><td width=\"490\" valign=\"top\" align=\"left\"><table width=\"490\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" background=\"http://abledesign.com/images/top_b.gif\" height=\"40\"><tr><td width=\"480\" valign=\"top\" align=\"center\"><font color=\"#ffffff\" face=\"Arial\" size=\"2\"><b>Web Design that Can!</b></font></td><td width=\"10\" valign=\"top\" align=\"center\"> </td></tr></table></td><td width=\"100%\" valign=\"top\" align=\"left\"><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" background=\"http://abledesign.com/images/top_b.gif\" height=\"40\"><tr><td width=\"100%\" valign=\"top\" align=\"center\"> </td></tr></table></td><td width=\"40\" valign=\"top\" align=\"left\"><img src=\"http://abledesign.com/images/top_right_b.gif\" height=\"40\" width=\"40\" border=\"0\"></td></tr></table>")
}
//-->
</SCRIPT>
The approach was to only display the top and bottom portions of the blue border if the browser a) could interpret JavaScript (if not, the user will miss out on much of the functionality of virtually every site) and b) is a version that could interpret the stretched images. If either of these conditions are false, it is preferable to not show the top/bottom border, as demonstrated in the After picture above. A less essential aspect of the design was to allow enough room around the images on the left blue border to keep them from being pushed into the main page, while making them look properly spaced in browsers allowing zero margins.
In the browser conditional JavaScript code above, the red portion represents the actual HTML code that will get printed to the page if the necessary conditions are met. The quotation marks must be escaped with a backslash within the JavaScript. The same thing is done for the blue border at the bottom of the page.
Beyond examples such as this, one simple item will carry you far in your quest for maximum browser compatibility:
- I like to call it, "designing for the lowest common denominator." Netscape is acknowledged as adhering to HTML standards much closer than IE. Thus, if you design with Netscape in mind, chances are good your pages will work on most browsers. If you design for IE, chances are very bad that your pages will work on other browsers. Which would you rather? A few things to be careful of:
- Be careful to properly close your <table> tags. Netscape will generally show a blank page if the tables are not closed. IE does not care.
- If you used advanced features such as DHTML or CSS, make sure they will work in both IE and Netscape. Many do not.
- Whenever possible, proof your work in Netscape. You will catch problems early on.
Congratulations, you have just taken a major step along the pathway to making the web an all around more enjoyable place! Visitors from around the world will smile when they visit the friendly atmosphere of your browser compatible pages.
