This last part of the chapter on Web Standards in Dreamweaver shows you how to create a layout with a banner at the top of the page and a navigation menu on the left side. (From the book ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou, 2004, Apress, ISBN: 1590593480.)
Web Standards in Dreamweaver Part 3 - Browser and Device Issues (Page 9 of 12 )
Browser issues are cited as the main reason that people do not implement CSS on their web sites; however, this excuse is fast becoming outdated. Even so, we will look at how to address these issues in this section.
Although browsers with no support for CSS should render your content in areadable fashion, there are problems with browsers that have partial or buggy support for CSS, and it is these browsers, particularly Netscape 4, that you need to consider.
Versions of Netscape 4 may crash or render your page unusable or just plain ugly when encountering certain valid CSS declarations. Thankfully, there are ways around this problem.
Earlier, we looked at two ways of attaching a stylesheet to a page: linking it and importing it. Netscape 4 does not recognize the @ Import directive, and you can use this fact to your advantage by attaching two stylesheets to the page: one basic, Netscape 4–friendly stylesheet that you link to your page, and another, more advanced stylesheet that you attach using @ Import, making it invisible to Netscape 4.
1. To attach two stylesheets to your page in this way using Dreamweaver, attach the basic Netscape 4–friendly stylesheet first, using the link method, as shown in Figure 2-45.
Figure 2-45. The link method
2. Attach the second stylesheet with the declarations for newer browsers using @ Import, as shown in Figure 2-46.
Figure 2-46. The import method
3. Specify the imported stylesheet after the linked stylesheet so that the Netscape 4–friendly CSS is overridden by the second stylesheet. In Code view, the generated code looks like this:
Any CSS that you want to be different for newer browsers must be included in the imported stylesheet. The browser will use the values in the linked stylesheet if no values are found in the imported one for that element.