Home arrow Web Standards arrow Page 9 - Web Standards in Dreamweaver Part 3

Web Standards in Dreamweaver Part 3

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.)

Author Info:
By: Apress Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 9
September 22, 2004
  1. · Web Standards in Dreamweaver Part 3
  2. · Adding Page Content
  3. · Validating the Document
  4. · Revalidate Your Page in Dreamweaver
  5. · Set Properties of Table Cells
  6. · CSS for Layout
  7. · Create the Navigation
  8. · The Content Area
  9. · Browser and Device Issues
  10. · Media Descriptors
  11. · Working with Dynamic Data
  12. · Resources and Summary

print this article

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.

Netscape 4

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:

<link href="oldbrowsers.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url("newbrowsers.css");

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. 

JavaScript Techniques

It is possible to use JavaScript to detect what browser is being used, and then write an appropriate stylesheet for that browser. This method relies on the user having JavaScript turned on, but it can be very useful if you find that a bug in a particular browser causes a crash or other problem and you need to isolate that browser by attaching a stylesheet designed to be friendly to it.

You can also use JavaScript to detect whether the user is visiting with a newer, more standards-compliant browser or a version of the browser earlier than 5, and display stylesheets accordingly. This method checks to see whether the browser supports the W3C DOM and then writes the appropriate stylesheet into the page:

<script language="javascript" type="text/javascript">
if (!document.getElementById) {
document.write('<link rel="stylesheet" href="oldbrowsers.css" type="text/css" />');
document.write('<link rel="stylesheet" href="newbrowsers.css" type="text/css" />');

The first stylesheet in the code just shown should be the stylesheet for those older browsers that do not support the W3C DOM; the second stylesheet is for all newer browsers. 

This chapter is from ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou (Apress, 2004, ISBN: 1590593480). Check it out at your favorite bookstore today.

Buy this book now.

blog comments powered by Disqus

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials