This chapter is from the book
This chapter is from the book
This chapter is from the book
Overcoming Rendering Differences
When coding a web page, you may find that the effect you are trying to achieve does not render properly in a particular browser. You can address this problem in a number of different ways, most of which work as viable solutions.
Belt and Braces
Fortunately for the developer, HTML is a fault-tolerant language. If a browser comes across some markup that it doesn't know how to display, it just ignores it and moves on to the next piece of code it does recognize. The user isn't presented with any errors or warnings; the browser just quietly ignores code that it doesn't understand.
This helpful feature of HTML enables you to include both the valid code for displaying your pages in compliant browsers and the nonstandard code for the awkward browsers, without the user seeing any errors.
In many cases, this approach enables you to enter different sets of code and attributes where you would otherwise use only one. This "belt-and-braces" approach enables you to compensate for the differences between browsers.
For example, the two major browsers (Microsoft Internet Explorer and Netscape Navigator) use different methods to display zero page borders. Both browsers use attributes added to the body tag for this option, but those attributes differ. Figure 4.1 shows the Dreamweaver Page Properties dialog box with its four margin dimension options.
){kind=link}
Figure 4.1 Dreamweaver offers four margin size options.
The first two, Left Margin and Top Margin, cater to the margin options for Internet Explorer. The second two, Margin Width and Margin Height, cater to Navigator. Each browser interprets those it understands and ignores the others.
This method is widely used when different browsers support different attributes for a given tag; but what about when it's not just a different attribute you're dealing with, but a whole different tag?
Fortunately, these circumstances are fewer and farther between than attribute differences, but they can be treated in more or less the same way. Following the same principle that tags that are not recognized are ignored, just include both tags, and both browsers will cope.
Multiple Versions
Under some circumstances, you may find that complex pages become nearly impossible to render the same way in all browsers. Making the design work in one browser requires a totally different methodology than getting it to display in another. Under these circumstances, it may be necessary to produce different versions of the page for different browsers.
CAUTION
Think very carefully before deciding to build multiple copies of a page; maintaining those pages takes a lot longer than just updating one copy.
Using the Dreamweaver Check Browser behavior, you can detect which browser and version users are viewing your page with, and then redirect them to the appropriate version of the page for their browser. This enables you to design a separate page for any awkward browsers you may need to consider.
Figure 4.2 shows the Check Browser dialog box. It takes three different URLs into consideration: the URL to redirect to, an alternate URL to redirect to, and the same page the behavior is being applied to.
){kind=link}
Figure 4.2 You can redirect users with specific browsers.
Check Browser enables you to choose a page for Internet Explorer (IE) viewers from a version of your choosing, for Navigator (NN) viewers from a version of your choosing, and finally, for all the rest. The defaults that Dreamweaver starts with are good choices. In most cases, you will find that you might want a page for IE 4 users and above, NN 4.0 and above, and then all the minority browsers and older versions of the primary ones. Note, however, that unless your web site caters to a specialist technology market (a site about the Linux operating system, for example), 9 out of 10 of your visitors will be using Internet Explorer.