|
|
|
Web Site Design Tips: Browser Compatibility
Browser Safe Methods (for beginners)
- Simplicity is key - If you really want your site to look good and work well in all browsers, don't do anything fancy. No nested tables, no javascript, no style sheets. Just text and graphics. But that's no fun. It's better to encourage people to use the latest browser versions. If you do run into problems, check out the tips below and email if you have questions. The tips below are geared toward versions 4.0 Internet Explorer and Netscape Navigator. These versions have been around for a few years now and I find them an acceptable "low-end" when I design.
Browser Compatibility Issues (for developers who work with source code directly)
- Input field size. Internet Explorer tends to render input field boxes narrower than Netscape Navigator. To fix this, add the following inside the <HEAD> tags:
<STYLE>
.spacing { font-family:Courier,monospace; }
</STYLE>
or add the following lines to your external style sheet:
.spacing {
font-family : courier,monospace;
}
attribute: class="spacing" to <INPUT> tags. The field will appear a little shorter from top to bottom, and a little longer in Internet Explorer.
- Radio buttons in Netscape are surrounded by the background color (bgcolor) set in the body tag. If the background color is set in the body, and a radio button is display in a table with a different background color, the button will still have the background color set in the body. Adding the property: STYLE="background-color:#000000;" (replace 000000 with the appropriate color) to the column tags (td) should take care of this.
- Form fields or buttons don't show up in Netscape unless they are inside <FORM> tags. I learned this when I found that input "back" buttons with javascript controls weren't showing up in Netscape.
- Netscape doesn't display pages if some tags aren't closed. It is good practice always close tags, but take extra care to close all table tags as Netscape won't display the page if you don't.
- Be consistent in how you assign column widths in tables. Whenever you can, use only pixels as width (not percentages). If you have to use percentages, try to use JUST percentages. I haven't had a lot of problems with this, but some people do.
- Make sure column widths add up to the table width if using pixels. Make sure columns add up to 100% when using percentages. Failure to do this results in wacky alignment in some browsers.
- Empty columns can cause problems. Netscape often shrinks them down to just a few pixels. Generally, adding a non-breaking space ( ) takes care of it. Some suggest that a small transparent GIF is a better way to go - but don't forget to set height and width properties or Netscape will display a placeholder where the graphic goes.
- Table spacing. If you set cellspacing and cellpadding both to "0" in your tables, but still find you have space around images, make sure that the close column tag (<TD>) appears immediately after the image tag. Some browsers will add a space in the cell if one appears in the code.
- Setting margins to "0". If you don't want white space at the top and left of your page, you have to set body margins to "0". To please both IE and NN in this, make sure that your body tag has the following: marginheight="0" marginwidth="0" topmargin="0" leftmargin="0".
- Borders. Some browsers will display borders on tables and images unless you tell them not to. To be safe, always set borders to zero (border="0") in table and image tags.
- Special character codes are not always recognized by Netscape Navigator. One in particular: © does not result in the copyright symbol when viewed in Netscape. As a precaution, use the numeric equivalent: ©
Top of Page
Tips Table of Contents
|
|
| |
|
| |
© Copyright, 2001, City Beautiful Design |
| |
|