CSS and Browser IssuesSolutions

 < Day Day Up > 



CSS and Browser Issues/Solutions

Developing for the Netscape 4x browser is difficult at best; it isn't surprising that it is as difficult to deal with its quirky support for CSS. NN4x is, however, still a well-used browser, and as long as you are required to support it as a target browser, you need to know how to deal with its issues.

Create multiple style sheets when you simply cannot get your styles to work for both Netscape 4x and CSS-compliant browsers. Start by developing your initial style sheet using Netscape 4x supported styles. Don't worry about inconsistent margins and simple differences between platforms. When you have your styles completed, be sure to add comments to the style sheet to indicate each style's purpose.

Opening and commenting an external style sheet

Comments are notes that are written to explain or clarify the purpose of a block of code. They are hidden from the browser by special starting and ending symbols. An HTML comment is written as follows:

<!-- comment here -->

CSS comments use a different markup:

/* this is a comment */

Adding comments makes it easier for you (and those who come after you) to understand why certain methods or settings were used. When you plan to use multiple style sheets, add comments to clarify which styles use different settings or to indicate which styles are present in only one style sheet. To open an existing style sheet to add comments, locate the file in the Site panel (window) and double-click it. A .css file opens in Dreamweaver in Code view. To try this, open the style sheet used in the previous exercise, and follow these steps:

  1. Navigate to the linkstyles folder and double-click  linkstyles.css to open it.

  2. Place your cursor in front of the body listing.

  3. Add (a forward slash plus an asterisk) to form /*.

  4. Type These are the styles used in both style sheets.

  5. Type to form */ to close the comment.

  6. Save the page.

Duplicating the style sheet

The easiest method to create a copy of the style sheet is to use Save As from the first style sheet. Don't forget that style sheets use the .css extension. To duplicate a style sheet, follow these steps:

  1. With  linkstyles.css (from the linkstyles defined site) open and saved, choose File ® Save As, Navigate to the linkstyles folder you copied to your hard drive, and save the second style sheet as w3c_linkstyles.css.

  2. Close the open style sheet.

Attaching an external style sheet

When you have an existing style sheet and want to use it in another page of the site, you need to attach it to the new page. To attach a style sheet, open the page, and click the Attach Style Sheet button at the bottom of the CSS Styles panel. The same option is also available from the panel's Options menu.

In the dialog box that opens, navigate to select the desired style sheet. Figure 36-10 shows the two options — Link and Import — available for attaching a style sheet. Use Link unless you specifically want to exclude the Netscape 4x browser. Import uses the @Import directive — a method not understood by NN4I.

click to expand
Figure 36-10: Attachment options in the Link External Style Sheet dialog box

Using @import with multiple style sheets

Use multiple style sheets when settings for a style's properties will not work in both NN4x and CSS-compliant browsers. You can use scripting to detect which browser is used and dynamically set the style sheet to use, which is not a simple process. Instead, use the @import directive to prevent NN4x browsers from reading alternate settings for your styles. Only the CSS-compliant browsers read and use the new (and last declared) settings.

To use two different browser-specific style sheets in the same document, import the second style sheet (this assumes you made one in an earlier exercise), as shown in this exercise:

  1. With  more_link_styles.htm open, go to Edit mode of the CSS panel, and click the listing of styles for the document. This ensures that any importing occurs in the HTML document and not in another style sheet.

  2. Click the Attach Style Sheet button at the bottom of the CSS Styles panel and locate the second style sheet, and choose the Import option. Click OK. Save your HTML page.

  3. Choose View ® Head Content. Figure 36-11 shows the style icon for embedded styles. Change to Split view and click the embedded styles icon to highlight these styles.


    Figure 36-11: The Style icon pressed

Dreamweaver places the @import between style tags. If you have existing embedded styles defined, it adds @import at the beginning of the existing styles, which may cause problems in the way the browser determines specificity and cascade. To prevent this, place your cursor below the existing style tags and press Ctrl+T (Command+T) to access the Quick Tag editor. Type style and press the Enter key to exit the editor. Dreamweaver balances the tags by adding the ending </style> tag. Select the @import code and drag it to its new location between the new style tags.

You can see the newly imported style sheet listed in the CSS Styles panel when in Edit mode.

Using alternate style properties and settings

Trying to adjust style properties to work in all your target browsers is a tough job. Because Netscape 4x doesn't follow the W3C specification, settings that work in NN4x mess up the page in compliant browsers. For example, if you want to reduce the gap between headings and paragraphs, you have to use two style sheets.

To follow along continue using the  more_link_styles.htm page used in the previous exercises. To resolve this issue, follow these steps:

  1. Select the imported style sheet in Edit mode of the CSS Styles panel. Use the panel options or the icons to temporarily remove the attached style sheet.

  2. Double-click the <p> tag style to edit it. Click the Box category and add a zero to the top margin field. Because Same for All may be checked, all margins use this zero value. Click OK.

  3. Now edit .maincontent p. Its box margins use left, right, and bottom margins. Remove all the settings except the bottom margin, which is set to 10px.

  4. Preview the page in a compliant browser. As shown in Figure 36-12, you should see space between the two adjacent paragraphs, but no extra space between the heading and the paragraph below it. The .maincontent h4 style has its top and bottom margins set to zero. Zero space occurs between the heading and paragraph. Ten pixels of space occur between the paragraphs.

    click to expand
    Figure 36-12: As seen in Internet Explorer 6

  5. Now preview the same page in Netscape 4x. Figure 36-13 shows how Netscape 4x renders lots of space below the heading but none between the two adjacent paragraphs.

    click to expand
    Figure 36-13: As seen in Netscape 4.4

The W3C specification says that vertical adjacent margins for block elements should "collapse" in favor of the largest value. Netscape is inconsistent (at best) in how it follows this rule. What you see in Dreamweaver is definitely not what you get. The .maincontent h4 style already has its top and bottom margins set to zero, so what else can you do? You might try a negative value for the paragraph as shown in these steps:

  1. Double-click the .maincontent p style, and set the top margin to –.8em. Ems are especially useful for margins because their value is computed from the font size, so adjusting the font size automatically adjusts the spacing (or lack thereof) caused by the em value. .8ems equals 80 percent of the current font size.

  2. Click OK and test this page in NN4x.

The heading and paragraph are spaced nicely, but look at the overlap created in between the paragraphs. If you preview in the compliant browser, you'll see that the heading and paragraph have the problem, but the paragraphs are fine. Rather than use a negative value that affects all your paragraphs, try this approach:

  1. Double-click .mainparagraph p and remove the top margin value. Click OK.

  2. Add a new custom class named .firstpara.

  3. Add a –.8em margin and close the dialog box. Right-click (Control-click) the first paragraph below the heading, and apply the .firstpara style. Save and preview in NN4x.

  4. Now that you've isolated the negative margin to the first paragraph, edit the <p> style. Uncheck the Same for All option, and add 1em to the top margin. Click OK.

    Looks great, doesn't it? Or better, at least. But what happens in the compliant browsers? Take a look. These browsers do exactly as asked and the result is a nasty overlap between the heading and first paragraph. Now you're ready to use a second style sheet.

  5. Because you altered the first style sheet so much, duplicate the .linkstyles.css sheet again, overwriting the w3c_linkstyles.css sheet.

  6. Attach the new version of the w3c_linkstyle sheet.

  7. Locate the .firstpara style in the w3c style sheet and double-click to edit. Set the top margin to zero. The rest of the margin fields should be empty. Click OK and save the page. Test in both browsers.

The results should be fairly consistent between all browsers. What you've done is to create a conflict between the values used by the .firstpara style. The compliant browsers, which can read the imported style sheet, use zero instead of the negative –.8 em. Netscape 4x reads the negative value only.

To finish this section, delete any style in the second style sheet that isn't different from the first. Most browsers read both style sheets, and many style values from the first style sheet are the same in the second. This step can speed up the processing the user's computer must perform.



 < Day Day Up > 



Macromedia Studio MX Bible
Macromedia Studio MX Bible
ISBN: 0764525239
EAN: 2147483647
Year: 2003
Pages: 491

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net