homepage Welcome to WebmasterWorld Guest from 54.205.247.203
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Making Style Sheets Work in NN4
Simple tutorial on taming the beast!
DrDoc




msg:1180298
 10:42 pm on Feb 20, 2003 (gmt 0)

A common problem for any Web developer is how to make style sheets behave in Netscape 4.x. Sadly, the problem does not lie in your style sheet - Netscape 4.x browsers simply have a very poor support for proper CSS. As if that were not bad enough - the little support it has is buggy too!

So, what is there to do about it?

Well, there are three basic workarounds. They will be discussed separately.


1. <link> vs. @import

There are four ways to apply style sheets to page elements:

  • External CSS, using the <link> tag
  • External CSS, using @import in the <style> tag
  • Internal CSS, using the <style> tag
  • Internal CSS, using the style attribute (=inline style)

The key to NN4 support is using external style sheets.

NN4 browsers understand the <link> tag and will therefore be able to properly load CSS included using this method. For example:
<link rel="stylesheet" href="styles/basic.css" type="text/css">

Now, just because NN4 properly loads the style sheet doesn't mean that it will properly display it. Any unsupported rules included in this style sheet might cause bizarre results in NN4, even make the page not render fully, if at all.

This is where the @import function comes in. NN4 browsers do not understand @import. Any style sheet included using @import will therefore be ignored by NN4. For example:
<style type="text/css">
@import "styles/blah.css";
</style>

How does this knowledge help me?

By using a combination of these two inclusion methods you can make a page render properly in both NN4 and other browsers. How?

First, create a style sheet that contains all basic CSS rules, rules that can be understood and rendered by NN4. Include this style sheet using the <link> tag as described above.

Second, create another style sheet. In this one you include rules that will make the page look nicer, rules that are not supported by NN4, but can be properly rendered by other browsers. Include this style sheet using @import.

<link rel="stylesheet" href="styles/basic.css" type="text/css">
<style type="text/css">
@import "styles/blah.css";
</style>

NN4 will only apply styles included in basic.css and ignore any style declarations included in blah.css. Other browsers will use the styles from both files.

In these browers any rules included in the second file will override those in the first one. This makes it possible for you to include one set of rules for NN4, and then change these by applying different rules in a style sheet that is imported using the @import method.


2. Hide rules from NN4

If you don't want to use two separate style sheets there is a method that lets you hide selected rules from NN4 browsers, but will be displayed in others. For example:
div.nav {
color: #009;
font: 0.81em Verdana,sans-serif;
/*/*/
background: #CCC;
font: 1em Verdana,sans-serif;
/* End */
}

This method works no matter if it is used in an external or internal style sheet.

How does it work?

The key to this method is to take advantage of a parsing error in NN4. Look at the example above.
/*/*/

// Anything placed between these two lines will be ignored by Netscape 4.x

/* End */

Why? When NN4 encounters the first line /*/*/ it correctly interprets it as a comment. However, because of the way this comment is formatted NN4 fails to interpret the end of the comment. It will therefore ignore anything until it finds another */ sequence.

Hence, the above style sheet would render blue (#009) text in 0.81em size font Verdana or generic sans-serif. Other browsers would render blue (#009) text on a light gray (#CCC) background in 1em size font Verdana or generic sans-serif.

Why would we want to do this? NN4 sometimes will not render a background color properly. It also enlarges the font compared to other browsers.

In browsers without this parsing bug the second font declaration will override the first, just as in the example above with <link> vs. @import. This, however, is done within the style sheet.


3. Redundant declarations

Sometimes the problem is not whether NN4 understands a certain rule or not. Sometimes it just might not always apply it properly. For example, font properties applied to the document body will be ignored inside a table (in NN4). Other browsers will properly render the table text according to the rules for the body.

This problem can easily be avoided by applying redundant selectors. Instead of using
body {
font: 0.81em Verdana, sans-serif;
/*/*/
font: 1em Verdana, sans-serif;
/* End */
}

consider using
body, td {
font: 0.81em Verdana, sans-serif;
/*/*/
font: 1em Verdana, sans-serif;
/* End */
}

to apply the same rules to all <td> tags.

There are also times when NN4 will render the first few paragraphs correctly, but ignore the last one. How to get around this?

Again, you can use redundant selectors, e.g. do not just apply styles to the container div, but to the paragraphs within it as well.
div.content, p {
font: 0.81em Verdana, sans-serif;
/*/*/
font: 1em Verdana, sans-serif;
/* End */
}

You can also give all the paragraphs a separate class, and apply the styles using the class name instead of the generic p selector.


Conclusion

Experiment using the different methods described above. Usually a combination of the two or more will work the best.

Do not try to make the page look exactly the way you intended if using NN4 - only aim for making the page look OK and be useful for those using this stone-age browser.

DrDoc

 

Birdman




msg:1180299
 10:47 pm on Feb 20, 2003 (gmt 0)

Nice post DrDoc. I should start putting more effort into NN4 rendering. My stuff usually goes haywire in that browser.

Nick_W




msg:1180300
 10:49 pm on Feb 20, 2003 (gmt 0)

Oh my, I'll join the 'more effort' club too Birdman!

Nice Post! - One for the toolkit i think, thanks for posting it, I never did get the comments hack ;)

Cheers

Nick

DrDoc




msg:1180301
 10:50 pm on Feb 20, 2003 (gmt 0)

For a couple of months I almost ignored NN4 on some sites. But now it all renders "ok" .. Sure, it might be in plain black and white, Times New Roman .. But at least NN4 visitors can use the site ;)

It's all accomplished mainly using the /*/*/ /* End */ method :)

Edouard_H




msg:1180302
 10:58 pm on Feb 20, 2003 (gmt 0)

Excellent post. @import works, but I always end up with the "real" style sheet more bloated than I'd like. It's got to be easier and produce leaner code using the comment method. I'm trying it! Thanks.

tedster




msg:1180303
 1:48 am on Feb 21, 2003 (gmt 0)

font properties applied to the document body will be ignored inside a table (in NN4)

And after a table is closed, NN4 often "forgets" the styles that it executed properly earlier on the page. Enclosing the table in its own set of <div></div> tags - even though they *should* not be needed - helps NN4 to remember the appropriate styles farther down the page, after the table.

I don't pretend to know why this works, but it does.

Hagstrom




msg:1180304
 3:54 pm on Feb 22, 2003 (gmt 0)

Great tip, DrDoc

I have had lots of trouble with relative font sizes in NS4: If you don't end your paragraphs (</p> ) the next paragraph wil inherit the percentages - with every paragraph being smaller and smaller (or larger and larger). And sometimes the paragraphs inherit font size from the headers - meaning that you have to terminate your header-tags with </p>!

With the comment-hack there's an easy solution:


P {font-size : 12pt;}
/*/*/
P {font-size : 100%;}
/* End */

NS4 gets fixed fonts and everybody else uses relative fonts.

hakre




msg:1180305
 4:10 pm on Feb 22, 2003 (gmt 0)

i would suggest to use netscape 2.01 for compability tests of your site with netscape. if it looks good without any css, then 4.x users can be forced to switch css off to view the page ;) .

andreasfriedrich




msg:1180306
 4:16 pm on Feb 22, 2003 (gmt 0)

Great post DrDoc. Not sure though whether that will make me support NS4 ;)

Andreas

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved