		GeodSoft

Except for this first block of text, the following content is identical to styltst1.htm This page requires it's own external stylsheet, styltst2.css to deal with the different background colors and matches neither the GeodSoft.com standard or the one for the standalone version of this page. Note that Netscape loses the text color on this page where IE and Opera respect the color defined by the style sheet.

These first two text blocks are plain text not inside of any kind of HTML tag (even <P> tags) except the <BODY> tag. (Of course in the version inside a standard GeodSoft.com web page everthing is actually several table levels deep.) This text was originally placed here because while working on this document at various times Netscape displayed other text elements later in the body, not enclosed by any other HTML tag without the margins or default color applied by the general style settings for the <BODY> tag.

There was a <DIV> tag just before this text but a <P> has now been used instead. Notice that most browsers will show this paragraph slightly smaller than the preceeding paragraph. For some reason the text that precedes each list below, was not indenting or picking up the default color provided in <BODY> tag of the Cascading Style Sheet when displayed by Netscape 4.5, at least on Windows NT 4, SP 4. It seemd to require that this text be enclosed in some other, any other HTML tag but as the document has grown, that behaviour cannot be repeated.

There is a bug that has persisted through multiple versions of Netscape (4.5 - 4.7 on NT and 4.6 on Linux). This behaviour where each reload of a changed external stylsheet or sometimes changed HTML document text was being displayed as plain black text on a white background with HTML tags displayed as text has disappeard for a few breif periods but continues to recur nearly all the time. The second refresh or reload following such a change causes the document to display more or less properly. This same erratic behaviour is showing in every web page that I've written that uses an external stylesheet including all the standard GeodSoft.com pages. There does not even need to be a net change the the style sheet; simply saving it to disk triggers the bug.

Actually its the style sheet that is being displayed as text. Starting somewhere in the heading areas the rest of the document is displaying more or less normally. Over time the location of the end of the improper display varies. Much of the following paragraphs are left as they were originally written. The behaviour of Netscape simply changed too many times to keep up with what it was doing.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

Browser response variation to these style sheets is just too much to deal with. Two weeks ago when I was working on this, one copy of Nestscape 4.5 on NT didn't pick up any style sheet attributes at all and another copy from the same downloaded executable was working (more or less - see above) with most of them. At no point did Netscape recognize the size variations applied to paragraph tags. IE 4.01 was consistently recognizing the sizes in the paragraphs.

Today (Jan. 6, 2000) both copies of Navigator on NT are recognizing the paragraph size variations. A new copy of Navigator 4.61 on Linux (Red Hat 6.1) does not recognize the paragraph size tags but seems to recognize all the other style tags. This paragraph, like most others is enclosed in the default paragraph tags which set the size to 90%.

Perhaps the oddest thing is that the Navigator 4.5 on NT which didn't recognize any style tags two weeks ago now seems fine. I've made no changes to that copy of Navigator and the only change on the machine is that I installed a copy of the Sun Java SDK. I don't see how that could be involved but it's possible this is an NT thing. The Navigator copy which previously didn't work at all, is also now not showing the odd behavior on refreshes or reloads that the other continues to display intermittently. On Jan. 28, 2000, I did some additional work with this document and the style sheet and the alternate reload behaviour returned to Netscape. Interestingly the heading definiations, color, font-face and size worked but no other formatting was recognized. On the second reload following each change, the CSS worked properly, at least as far as Netscape recognizes CSS. Actually it appears that most formatting except the styles defined in the BODY tag (margin, color, background color) do work on the first reload.

This is a second paragraph of test text (well it was the second when it was first written). This one uses the quote class which should provide indenting, italics and a brighter blue text. It's size is 90% or the same size as the "standard" paragraph. It includes a link to itself which is styltst1.htm.

This is a third paragraph of text using the quote2 class which should provide additional indenting, italics, a still brighter blue and 80% size. This also includes a link to itselfstyltst1.htm.

This fourth paragraph uses the large class for paragraphs defined in the style sheet as 105% where as the default paragraph is 90%.

This fifth paragraph uses the small class for paragraphs defined in the style sheet as 75% where as the default paragraph is 90%.

This paragraph returns to the "standard" 90%. Below are four lists; notice the text here is slightly smaller than that below which is not enclosed in paragraph tags. The first two are unorderd and the second two are ordered. The first list of each pair has the standard list formating characteristics and the second has style guidlines applied.

List One - Unorderd without additional list specific styles:

First item:
Second item:
Thrid item:
Fourth item: For variation the fourth item will have some meaningless test text included as part of the item to see how the browsers handle indenting and where they locate second and subsequen lines of text relative to the first line and to the list item marker.
- First item:
- Second item:
- Thrid item:
- Fourth item: For variation the fourth item will have some meaningless test text included as part of the item to see how the browsers handle indenting and where they locate second and subsequen lines of text relative to the first line and to the list item marker.
  - First item:
  - Second item:
  - Thrid item:
  - Fourth item: For variation the fourth item will have some meaningless test text included as part of the item to see how the browsers handle indenting and where they locate second and subsequen lines of text relative to the first line and to the list item marker.

List Two - Unorderd with styles:

First item: the style is square bullets and dark red text
Second item:
Thrid item:
Fourth item: For variation the fourth item will have some meaningless test text included as part of the item to see how the browsers handle indenting and where they locate second and subsequen lines of text relative to the first line and to the list item marker.
- First item: the style is square bullets and dark red text
- Second item:
- Thrid item:
- Fourth item: For variation the fourth item will have some meaningless test text included as part of the item to see how the browsers handle indenting and where they locate second and subsequen lines of text relative to the first line and to the list item marker.
  - First item: the style is square bullets and dark red text
  - Second item:
  - Thrid item:
  - Fourth item: For variation the fourth item will have some meaningless test text included as part of the item to see how the browsers handle indenting and where they locate second and subsequen lines of text relative to the first line and to the list item marker.

Third list - Ordered with no additional styles:

First item:
Second item:
Thrid item:
Fourth item: For variation the fourth item will have some meaningless test text included as part of the item to see how the browsers handle indenting and where they locate second and subsequen lines of text relative to the first line and to the list item marker.
1. First item:
2. Second item:
3. Thrid item:
4. Fourth item: For variation the fourth item will have some meaningless test text included as part of the item to see how the browsers handle indenting and where they locate second and subsequen lines of text relative to the first line and to the list item marker.
  1. First item:
  2. Second item:
  3. Thrid item:
  4. Fourth item: For variation the fourth item will have some meaningless test text included as part of the item to see how the browsers handle indenting and where they locate second and subsequen lines of text relative to the first line and to the list item marker.

Fourth List - Ordered with styles applied:

First item: the style is Upper-Roman
Second item:
Thrid item:
Fourth item: For variation the fourth item will have some meaningless test text included as part of the item to see how the browsers handle indenting and where they locate second and subsequen lines of text relative to the first line and to the list item marker.
1. First item: the style is Upper-Alpha
2. Second item:
3. Thrid item:
4. Fourth item: For variation the fourth item will have some meaningless test text included as part of the item to see how the browsers handle indenting and where they locate second and subsequen lines of text relative to the first line and to the list item marker.
  1. First item: the style is Decimal
  2. Second item:
  3. Thrid item:
  4. Fourth item: For variation the fourth item will have some meaningless test text included as part of the item to see how the browsers handle indenting and where they locate second and subsequen lines of text relative to the first line and to the list item marker.
    1. First item: the style is Lower-Roman
    2. Second item:
    3. Thrid item:
    4. Fourth item: For variation the fourth item will have some meaningless test text included as part of the item to see how the browsers handle indenting and where they locate second and subsequen lines of text relative to the first line and to the list item marker.

This paragraph is enclosed in <DIV> tags but not paragraph tags. Looking at the above lists and studying the HTML code and the browser response, several things become apparent. For unordered lists, Netscape (4.5) changes the bullet between the first and second levels but not subsequent levels. IE (4.01) changes the bullets between the first three levels but not subsequent levels. When the list-style-type is specified, it overrides the browser behaviour which changes the bullet types. To provide different bullet types at each level a different style class needs to be created and used. If all you are doing is changing the bullet type, there is little point in using styles with unorderd lists.

This and the following paragraphs are enclosed in <P> tags (and should be slightly smaller than the preceeding paragraph). Neither browser changes the numbering type for ordered lists at lower levels. Styles can be used to make a series of nested ordered lists look like a traditional outline.

Notice also that Netscape (4.5) provides no spacing around an ordered lists so they all run together unless additional tags are inserted. IE treats each list as if it is a paragraph so that any elements that are between ordered lists are automatically separated from them. If text is placed inside the list tags but not preceeded by a <LI> tag, that text is not separated from the following list items.

First Cell	Second Cell
Thrid Cell	Fourth Cell

From this point on, all versions of Netscape that I have seen loose the defined dark blue text color and revert to black text. Both IE and Opera display this text as dark blue.

Odd Note on Margins In another document, working on the new Geodsoft site, I had a case of too much text filling an area. In this case it was the "content cell". I don't know where the site will end up but like several other sites I've worked on recently, it looks like the variable page content will be enclosed in a table cell that is at least several tables deep. I though about resorting to the old standard <div align="center"><table width="90%"> and of course blockqoute but then I thought this might be a good one for a style. I created a P.margin defined as {margin-left:5%; margin-right:5%}. IE (4.01) went crazy and created a table cell several thousand pixels wide so big paragraphs were reduced to two or three lines and there was a huge margin. It may well have been 5% of the huge cell but the result was completely unusable. Netscape 4.5 displayed the result exactly as I would expect, except of course having to refresh twice to clear the garbage from the first refresh. I then tried "2em" instead of "5%" and got expected results in both browsers.

Margins and Fonts Together Continuing with the previous idea on margins, since it's becoming apparent that my standard paragraph for body text in the main content column on the GeodSoft web site is going to be indented (2em's right now) and have a smaller font size (<font size="-0">), it seemed natural to create a paragraph style that captured this cobmination so both cold easily be adjusted at once. With three browsers, IE 4.01 on NT, Netscape 4.5 on NT and Netscape 4.72 on Linux, none of the recognize the font size at all. IE and Netscape 4.7 both recognize the margin but neither recognizes the font size part. Netscape 4.5 doesn't recognize either part and is behaving as if their is no indent or font size, i.e. the text is full width and normal size. These are all deeply inside of tables but once again there is a potentially useful feature that is completely worthles because of browser variability.

Oddities with Table Data Widths Netscape (NT 4.5) appears to ignore all table width specifications in an external style sheet. IE (NT 4.01) appears to recognize table widths specified in any unit but only if there is no class name associated. This makes table data widths quite useless. If the browsers would recognize table data widths with class names it would be very handy for specifing widths of features like a navigation column, especially if the with were specified in em's or ex's so that it would expand or shrink when a user changed the base font size in the browser.

Top of Page - Site Map

Copyright © 2000 - 2014 by George Shaffer. This material may be distributed only subject to the terms and conditions set forth in https://geodsoft.com/terms.htm (or https://geodsoft.com/cgi-bin/terms.pl). These terms are subject to change. Distribution is subject to the current terms, or at the choice of the distributor, those in an earlier, digitally signed electronic copy of https://geodsoft.com/terms.htm (or cgi-bin/terms.pl) from the time of the distribution. Distribution of substantively modified versions of GeodSoft content is prohibited without the explicit written permission of George Shaffer. Distribution of the work or derivatives of the work, in whole or in part, for commercial purposes is prohibited unless prior written permission is obtained from George Shaffer. Distribution in accordance with these terms, for unrestricted and uncompensated public access, non profit, or internal company use is allowed.

Home >
How-To >
Style Sheets (CSS) >
styltst2.htm

What's New
How-To
Opinion
Book

Email address