Cascading Style Sheets - CSS Education ( Part-7 ) CSS final

pause-after
pause-after defines the duration of a silent pause to be inserted after the content of an element.
Values
| | inherit
Initial Value
UA dependent
Percentages
see description under Values
Inherited
no
Applies to
all elements
Media Groups
aural
Values


Any time value (e.g., 300ms); the pause will be the length of time specified.

The length of the pause is dictated by the value of speech-rate. Thus, pause-after: 33% would
yield 167ms if the speech rate is two words per second (120 words per minute), and 333ms if it’s one
word per second (60 words per minute).
Note The generated pause is observed before any cue-after content.
Examples
table {pause-after: 1500ms;}
li {pause-after: 50%;}
Related Properties
cue-after, pause, pause-before, speech-rate
pause-before
pause-before defines the duration of a silent pause to be inserted before the content of an element.
Summary
Value Syntax
| | inherit
Initial Value
UA dependent
Percentages
see description under Values
Inherited
no
Applies to
all elements
Media Groups
aural
Cascading Style Sheets 2.0
141
Values

Any time value (e.g., 2s).

The length of the pause is dictated by the value of speech-rate. Thus, pause-before: 50% would
yield 250ms if the speech rate is two words per second (120 words per minute), and 500ms if it’s one
word per second (60 words per minute).
Note The generated pause is observed after any cue-before content.
Examples
h2, h3, h4 {pause-before: 200%;}
ol li {pause-before: 1s;}
Related Properties
cue-before, pause, pause-after, speech-rate
pitch
pitch specifies the average pitch of the speaking voice used to render spoken text.
Summary
Value Syntax
| x-low | low | medium | high | x-high | inherit
Initial Value
medium
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
aural
Values

A frequency value, which must be set in hertz (e.g., 140Hz), will define an absolute frequency to use as
the pitch average.
x-low
While the corresponding absolute frequency will be different for every voice family, the result given by
x-low must at a minimum be lower than the result derived from the keyword low.
low
While the corresponding absolute frequency will be different for every voice family, the result given by
low must, at a minimum, be lower than the result derived from the keyword medium.
medium
While the corresponding absolute frequency will be different for every voice family, the result given by
medium must, at a minimum, be higher than the result given by the keyword low, and lower than the
result derived from the keyword high.
high
While the corresponding absolute frequency will be different for every voice family, the result given by
high must, at a minimum, be higher than the result derived from the keyword medium.
x-high
While the corresponding absolute frequency will be different for every voice family, the result given by
x-high must, at a minimum, be higher than the result derived from the keyword high.
Cascading Style Sheets 2.0
142
Note The default average pitch will depend on the voice family; for example, the
average male pitch is generally given as 120Hz, while the female average is in
the area of 210Hz.
Examples
p.shriek {pitch: high;}
div.basso {pitch: x-low;}
body {pitch: 150Hz;}
Related Properties
pitch-range, voice-family
pitch-range
pitch-range defines the amount of variation permitted in the pitch of spoken text.
Summary
Value Syntax
| inherit
Initial Value
50
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
aural
Values

The higher the value of pitch-range, the more "animated" a voice will seem, due to the changes in
pitch used in speaking various words. A value of 0 will produce a voice with no pitch variation at all—in
other words, a flat monotone. The value 50 is defined to correspond to "normal" inflection. Higher
values will lead to a perception of more animation in the voice.
Note The number values are raw numbers, not frequency values. Thus, setting pitchrange:
70 does not mean that the pitch can vary up to 70Hz. In fact, the pitch
variation may be more or less than 70Hz, depending on the voice family and
possibly a number of other unknown factors. The degree of pitch change for each
numeric value of pitch-range is not defined by CSS.
Examples
body {pitch-range: 66;}
*.robot {pitch-range: 0;}
Related Properties
pitch, voice-family
play-during
play-during defines a sound to be played while rendering the element’s content. This sound is also
known as a "background sound."
Cascading Style Sheets 2.0
143
Summary
Value Syntax
mix? repeat? | auto | none | inherit
Initial Value
auto
Percentages
n/a
Inherited
no
Applies to
all elements
Media Groups
aural
Values

A single URI may be given, and it should resolve to a sound file. If it does not, then play-during is
treated as though it had been set to auto.
mix
Causes the background sound of the element to be played, along with any background sound resulting
from the value of play-during for any ancestor elements. If the value does not contain mix, then the
element’s background sound replaces the ancestor’s background sound for the duration of the
element’s rendering. Once the element has been rendered, its background sound ceases and the
ancestor’s background sound resumes.
repeat
Causes the background sound to be repeated if it finishes before the element is fully rendered. If the
value does not contain repeat, then the sound will only be played once. Any background sound which
lasts longer than the rendering time for the element will be clipped once the element has been spoken,
regardless of the presence or absence of repeat.
auto
Any sound being played for any ancestor elements will continue to be heard, but no background sound
will be produced by the current element. If there is no sound associated with any ancestor elements,
then no sound will be heard.
none
Causes complete background silence during the rendering of the element. No background sound is
played for the element, and any background sounds associated with ancestor elements are also muted.
Note Due to the potential cacophony which could result from mixing several sounds
together at once, authors are encouraged to use the keyword mix sparingly, and
with a great deal of caution. This is especially true since CSS does not offer a
way to synchronize sounds with each other.
Examples
h1 {play-during: url(ocean-waves.wav) mix repeat;}
a:link (play-during: none;}
Related Properties
none
richness
richness defines the degree to which a voice will "carry."
Cascading Style Sheets 2.0
144
Summary
Value Syntax
| inherit
Initial Value
50
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
aural
Values

The higher the numeric value, the more rich the voice and the further it will carry. A lower value will
produce a voice which is soft and (to quote the specification) “mellifluous.”
Note Richness is also known as the “brightness” of a voice.
Examples
*.chairman-kaga {richness: 80;}
div.aside {richness: 10;}
Related Properties
stress, voice-family
speak
speak defines the method by which an element’s text should be aurally rendered, or if it should be
rendered at all.
Summary
Value Syntax
normal | none | spell-out | inherit
Initial Value
normal
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
aural
Values
normal
Cascading Style Sheets 2.0
145
Directs the user agent to speak the text using the pronunciation rules for that element and its children.
These pronunciation rules will be language-dependent and are not given in CSS.
none
Prevents the element from being spoken. This is accomplished by skipping the element entirely. This is
somewhat analogous to the visual style display: none, which suppresses rendering of an element
and closes up the space it would ordinarily occupy. By skipping the element, the time taken to render it
is effectively zero. In order to suppress audio rendering of an element but force the browser to pause for
the amount of time it normally would have taken to speak the element, see volume.
spell-out
Causes the user agent to speak the text one letter at a time, which is useful for speaking acronyms. For
example, the speak value for an element containing the text "W3C" should probably be spell-out.
Note In a sense, speak is something like display for aural media, although display can
still be used in aural stylesheets. In the case of speak: none, it is possible that
descendant elements may override this value and thus be spoken. In order to
ensure that an element and its descendants are not aurally rendered, use display:
none.
Examples
acronym {speak: spell-out;}
*.hidden {speak: none;}
Related Properties
speak-header, speaker-numeral, speak-punctuation, volume
speak-header
speak-header is used to specify the audible repetition (or lack thereof) of table headers.
Summary
Value Syntax
once | always | inherit
Initial Value
once
Percentages
n/a
Inherited
yes
Applies to
elements that have table header information
Media Groups
aural
Values
once
Headers will only be read once; that is, they will be rendered when the user agent first renders the
header cell.
always
The contents of the header will be spoken as the preface to every related cell in the table. Thus, for
every cell in a column beneath the header “Sales Tax,” the browser will speak the words “Sales Tax”
before rendering the contents of the table cell. If a document language possesses no way to associate
headers with other cells, then speak-header: always cannot be supported for documents in that
language.
Note The correct execution of speak-header values is dependent on a document
mechanism which associates cells with headers. For example, HTML 4.0
contains elements to describe columns and rows, as well as attribute-based
association methods, and in addition describes a method of deducing header
Cascading Style Sheets 2.0
146
information from the structure of the table.
Examples
table {speak-header: once;}
th.urgent {speak-header: always;}
Related Properties
speak, speaker-numeral, speak-punctuation
speak-numeral
speak-numeral defines the method by which a number should be aurally rendered.
Summary
Value Syntax
digits | continuous | inherit
Initial Value
continuous
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
aural
Values
digits
The numeral is read one number at a time; e.g., “four one one.”
continuous
The numeral is read in a language-dependent fashion; e.g., “four hundred eleven.”
Note Language-dependent speaking systems are not within the scope of CSS, so each
user agent may implement its own strategy for speaking numerals in a continuous
fashion.
Examples
td.phone-no {speak-number: digits;}
td.price {speak-number: continuous;}
Related Properties
speak, speaker-header, speak-punctuation
speak-punctuation
speak-punctuation defines the method by which punctuation should be aurally rendered.
Summary
Value Syntax
code | none | inherit
Initial Value
none
Percentages
Cascading Style Sheets 2.0
147
n/a
Inherited
yes
Applies to
all elements
Media Groups
aural
Values
code
Punctuation is spoken literally; e.g., “In closing comma I feel that...”
none
Punctuation is rendered as pauses of various lengths. The length of these pauses will be languagedependent.
Note Language-dependent speaking systems are not within the scope of CSS, so each
user agent may implement its own strategy for “speaking” punctuation.
Examples
*.literal {speak-punctuation: code;}
body {speak-punctuation: none;}
Related Properties
speak, speak-header, speaker-numeral
speech-rate
speech-rate is used to declare the rate at which text is spoken.
Summary
Value Syntax
| x-slow | slow | medium | fast | x-fast | faster |
slower | inherit
Initial Value
medium
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
aural
Values

Define the average number of words spoken per minute. Thus, a value of 90 would set the user agent
to read text at an average of 90 words per minute.
x-slow
Equivalent to 80 words per minute.
slow
Cascading Style Sheets 2.0
148
Equivalent to 120 words per minute.
medium
Equivalent to 180-200 words per minute. The exact number chosen is user agent–dependent.
fast
Equivalent to 300 words per minute.
x-fast
Equivalent to 500 words per minute.
faster
Adds 40 words per minute to the current value of speech-rate.
slower
Subtracts 40 words per minute to the current value of speech-rate.
Note Note that the words-per-minute figures for the keywords are normal for the
English language. Although implementation experience shows that other
languages have different speaking rates, these are not accommodated in the
specification. Future revisions of CSS may or may not address this situation.
Examples
em {speech-rate: slower;}
div.legalese {speech-rate: fast;}
h1 {speech-rate: 90;}
Related Properties
pause, pause-after, pause-before
stress
stress specifies the amount of inflection which is used to speak stress markers in a language.
Summary
Value Syntax
| inherit
Initial Value
50
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
aural
Values

Defines the range of stress inflection. The actual meaning of this value will depend on the language
being spoken, as different human languages permit different ranges of stress inflection. The exact
mechanism is not given in the specification. In general, higher values will lead to greater inflection on
stress markers, while lower values will lessen the stress inflection.
Note According to the specification, stress refers to "the height of ‘local peaks’ in the
intonation contour of a voice." As an example, the English language uses stress
markers to highlight various parts of a sentence using primary, secondary, and
tertiary stress. stress combines with pitch-range to produce the nuances of a
Cascading Style Sheets 2.0
149
given language.
Examples
strong {stress: 80;}
div.aside {stress: 40;}
Related Properties
pitch-range, voice-family
voice-family
voice-family is used to define the specific voice, and optionally a generic voice type, which is to be
used in the speaking of content.
Summary
Value Syntax
[[ | ],]*
[ | ] | inherit
Initial Value
UA dependent
Percentages
n/a
Inherited
yes
Applies to
all elements
Media Groups
aural
Values

Any specific voice name may be declared for the voice, although those voice names with whitespace or
other special characters in their names should be quoted.

The permitted generic voice family values are male, female, and child.
Note In effect, voice-family is the equivalent of font-family for aural media.
Examples
body {voice-family: JoeBob, Cuthbert, male;}
*.fem {voice-family: Julie, "Ma Bell", Aenea, female;}
Related Properties
pitch, pitch-range, stress, richness
volume
volume describes the "loudness" of a sound.
Summary
Value Syntax
| | silent | x-soft | soft |
medium | loud | x-loud | inherit
Cascading Style Sheets 2.0
150
Initial Value
medium
Percentages
refer to inherited value
Inherited
yes
Applies to
all elements
Media Groups
aural
Values

Any number in the range 0 – 100. The actual decibel levels which correspond to the volume number
values 0 and 100 are meant to be set by the user agent. For this reason, the specification defines the
number 0 as the minimum audible level, and 100 as the maximum comfortable level. This is due to the
fact that different environments require different decibel ranges for comfortable hearing. For example,
the setting for 0 should be different when driving in a car than the setting in a home office; similarly, the
setting for 100 will be different in a library than in a teenager’s bedroom. This approach allows users to
set the volume range appropriate for their diverse environments while still making use of the same
author stylesheet. This also means that the value 0 will produce some sound, at whatever decibel level
is set to be the minimum audible level for the current user environment.

Percentage values are calculated relative to the inherited value of volume, and then clipped to the
range 0 – 100 if necessary.
silent
No sound should be produced. Thus, silent and 0 are not equivalent, as 0 could produce a 30-
decibel sound or a 5-decibel sound, depending on the user agent’s settings. Like the mute button on a
television, silent will always result in a lack of any sound, regardless of the user agent settings.
However, the time it would normally have taken to play the sound (or read the text) will be filled with
silence. In other words, the user agent still attempts to play a sound or read text, but produces no actual
sound. This is somewhat equivalent to the visual style visibility: hidden, which causes elements
to be invisible but take up the space which would be required to display them.
x-soft
Equivalent to the numeric value 0.
soft
Equivalent to the numeric value 25.
medium
Equivalent to the numeric value 50.
loud
Equivalent to the numeric value 75.
x-loud
Equivalent to the numeric value 100.
Note In more precise terms, volume, to quote the specification, sets "the median
volume of the waveform... In other words, a highly inflected voice at a volume of
50 might peak well above that." Thus, volume does not enforce exactly the same
volume level for every sound produced, but instead defines the midpoint of the
sounds which are produced. In addition, the property volume is intended to adjust
the dynamic range of a sound, since it cannot be expected to override physical
controls like volume knobs.
Examples
div.sotto {volume: 33;}
h1 {volume: loud;}
*.quiet {volume: 0;}
Cascading Style Sheets 2.0
151
*.mute {volume: silent;}
Related Properties
speak
Part II: Summaries
Chapter List
Chapter 7: Browser Compatibility
Chapter 8: CSS2 Quick Reference
Chapter 9: Useful Resources
Chapter 7: Browser Compatibility
Overview
It is the unfortunate truth that CSS support in Web browsers has not been perfect. Only recently have
browsers even begun to reach a full and correct implementation of CSS1, and thus turned their eyes to
implementing CSS2. Knowing the potential trouble spots can save authors a great deal of frustration. As
of this writing, CSS2 support was not advanced enough to merit its own chart. In fact, the only portions
of CSS2 which could reasonably be charted are selectors (minimal adoption) and positioning (bugs
galore). The rest of CSS2 is either not supported, or partially supported. It is true that Navigator 6 and
Opera 5 have pretty good CSS2 support, but they also have pretty poor market penetration. Thus, we
have undertaken to chart support for the part of CSS which has the widest acceptance: CSS1.
In the following chart, each property and value is given a support rating for each browser on the chart.
These ratings are explained in Table 7-1.
Table 7-1: Support Chart Ratings Explained
Rating Description
Y Yes, the property is supported in this browser. No known bugs exist,
and the browser’s behavior is in accordance with the CSS specification.
Q Quirks still exist in this browser’s support, but overall it is very good.
This rating is reserved for browsers which are very, very close to
matching the specification, or which follow the specification’s letter but
not its spirit.
P Partial implementation of the specification. This generally means that
while there are no bugs in the browser’s behavior, there are also gaps
in its support.
B Buggy implementation. Not only is the support incomplete, it is incorrect
and may do great violence to page layout.
N No support for this property or value. The browser will act as if the
property or value did not exist.
The number found next to each property name below refers to the section number in the CSS1
specification.
Cascading Style Sheets 2.0
152
Cascading Style Sheets 2.0
153
Cascading Style Sheets 2.0
154
Cascading Style Sheets 2.0
155
Cascading Style Sheets 2.0
156
Cascading Style Sheets 2.0
157
Cascading Style Sheets 2.0
158
Cascading Style Sheets 2.0
159
Cascading Style Sheets 2.0
160
Notes
1.1 Containment in HTML
@import
WinIE4 and WinIE5 both import files even when the @import statement is at the end of the document
stylesheet. This is technically in violation of the CSS1 specification, although obviously not a major
failing; thus the "Quirk" rating.
1.1 Containment in HTML

Navigator 4 has particular trouble with list items, which is most of the reason for the “B” rating.
1.3 Inheritance
Navigator 4’s inheritance is unstable at best, and fatally flawed at worst. It would take too long to list all
occurrences, but particularly troublesome areas include tables and lists.
1.4 Class Selector
WinIE4/5 allows class names to begin with digits; this is not permitted under CSS1.
1.5 ID Selector
WinIE4/5 allows ID names to begin with digits; this is not permitted under CSS1. All browsers apply the
style for a given ID to more than one instance of that ID in an HTML document, which is not permitted.
This is an error-checking problem, not a failing of the CSS implementations, but it is significant enough
to warrant the ratings shown. Note that ID and classes can begin with digits under CSS2, so this is not
as much of a problem as it might first appear.
1.6 Contextual Selectors
x y z {dec;}
MacNav4 has the most trouble with contextual selectors involving tables. For example, HTML BODY
TABLE P is not properly handled.
3.2 Cascading Order
There are simply far too many instances of problems, with far too many of them defying analysis, to list
here.
5.2.2 font-family
cursive
Despite having a preferences setting for cursive fonts, Opera does not seem to apply the preference,
but instead substitutes another font.
5.2.4 font-variant
small-caps
WinIE4/5 approximates the small-caps style by making all such text uppercase. While this can be
justified under the CSS1 specification, visually it does not render the text in small caps.
Cascading Style Sheets 2.0
161
5.2.6 font-size
xx-small - xx-large
IE4/5’s (both Win and Mac) values for absolute sizes assign small to be the same size as unstyled
text, instead of medium, as one might expect. Thus, declaring an absolute font size (such as fontsize:
medium) will almost certainly lead to different size fonts in Navigator and Explorer. While this is
not incorrect under the specification, it is confusing to many authors.
5.3.2 background-color

Nav4 does not apply the background color to the entire content box and padding, but rather just to the
text in the element. This can be worked around by declaring a zero-width border.
5.3.2 background-color
transparent
Nav4 insists on applying this value to the parent of an element, not the element itself. This can lead to
“holes” in the parent element’s background. Opera 4 has a bug which only shows up when a
background has been repeated, and the rest of the background of the element is transparent (either by
default or when explicitly declared). Scrolling the element “offscreen” and then bringing it back can
cause “holes” to be punched through the repeated images of ancestor elements, thus creating visual
anomalies.
5.3.4 background-repeat
repeat
WinIE4 only repeats down and to the right. The correct behavior is for the background image to be tiled
in both vertical directions for repeat-y, and both horizontal for repeat-x. Nav4 gets this property
correct on a technicality: since it does not support background-position, there is no way to know
whether or not it would tile in all four directions if given the chance, or instead emulate WinIE4’s
behavior. Opera 3.6, MacIE4/5, and WinIE5 all behave correctly.
5.3.4 background-repeat
repeat-x
WinIE4 only repeats to the right, instead of both left and right.
5.3.4 background-repeat
repeat-y
WinIE4 only repeats down, instead of both up and down.
5.3.7 background
Navigator 4.x is legendary for its inability to correctly render backgrounds. If there is no border around
an element, then the background will only be visible behind the text of the element, instead of
throughout the entire content-area and padding. Unfortunately, if a border is added, there will be a
transparent gap between the content-area and the border itself. This is not the padding, and there is no
way to get rid of the gap.
5.4.3 text-decoration
none
According to the specification, if an element is decorated, but one of its children is not, the parent’s
effect will still be visible on the child; in a certain sense, it “shines through.” Thus, if a paragraph is
Cascading Style Sheets 2.0
162
underlined, but a STRONG element within it is set to have no underlining, the paragraph underline will
still "span" the STRONG element. This also means that the underlining of child elements should be the
same color as the parent element, unless the child element has also been set to be underlined.
In practice, however, setting an inline element to “none” will turn off all decorations, regardless of the
parent’s decoration. The only exceptions to this are Opera and MacIE5, which implement this part of the
specification correctly. Unfortunately, Opera 4 and 5 and Netscape 6 will not “span” inline images with
the text decoration of a parent element. In addition, Netscape 6 appears not to use the parent element’s
decoration, but instead “replicates” the underline onto child elements, which is clearly wrong. Despite its
seeming simplicity, this property remains a thorny problem for browser developers.
5.4.3 text-decoration
blink
Since this value is not required under CSS1, only Navigator supports it (surprise).
5.4.5 text-transform
uppercase
Opera 3.6 uppercases the first letter in each inline element within a word, which (according to the CSS1
Test Suite) it should not do.
5.4.6 text-align
justify
In Nav4, this value has a tendency to break down in tables, but generally works in other circumstances.
5.4.8 line-height

Nav4 incorrectly permits negative values for this property.
5.4.8 line-height
Opera 3.6 applies background colors to the space between lines, as opposed to just the text itself, when
the background is set for an inline element within the text. (See the CSS1 Test Suite for more details.)
5.5.01 margin-top
All margin properties seem to be problematic, or else completely unsupported, on inline elements; see
margin in this chapter for details.
5.5.02 margin-right
All margin properties seem to be problematic, or else completely unsupported, on inline elements; see
margin below for details. Opera 4 sometimes applies right margins to all of the boxes of an inline
element, not just the last one. This seems to come and go somewhat randomly, but it is common
enough to be noticeable.
5.5.03 margin-bottom
All margin properties seem to be problematic, or else completely unsupported, on inline elements; see
margin below for details.
5.5.04 margin-left
All margin properties seem to be problematic, or else completely unsupported, on inline elements; see
margin below for details. Opera 4 sometimes applies left margins to all of the boxes of an inline
element, not just the first one. This seems to come and go somewhat randomly, but it is common
enough to be noticeable.
Cascading Style Sheets 2.0
163
5.5.05 margin
All margin properties seem to be problematic, or else completely unsupported, on inline elements. In the
case of margin, support is pretty good on block-level elements in WinIE4 and WinIE5, while with inline
elements, WinIE4 and WinIE5 ignore this property completely. MacIE5 correctly honors margins on all
elements. Navigator 4.x does fairly well so long as margins are not applied to floating or inline elements,
in which case major bugs can be tripped.
Opera 4’s problems with correctly applying right and left margins to inline elements seems to get worse
with margin.
5.5.06 padding-top
See the notes for “5.5.10 padding.”
5.5.07 padding-right
See the notes for “5.5.10 padding.”
5.5.08 padding-bottom
See the notes for “5.5.10 padding.”
5.5.09 padding-left
See the notes for “5.5.10 padding.”
5.5.10 padding
All padding properties seem to be problematic, or else completely unsupported, on inline elements.
Opera 3.6 correctly ignores negative padding values, but will alter the line-height based on values of
padding applied to inline elements, which is incorrect. WinIE4 and WinIE5 will honor padding
assignments on block-level elements, but not inline elements. Navigator 4.x does fairly well so long as
padding is not applied to floating or inline elements, in which case major bugs can be tripped.
5.5.11 border-top-width
See the notes for “5.5.15 border-width.”
5.5.12 border-right-width
See the notes for “5.5.15 border-width.”
5.5.13 border-bottom-width
See the notes for “5.5.15 border-width.”
5.5.14 border-left-width
See the notes for “5.5.15 border-width.”
5.5.15 border-width
Nav4 will create visible borders even when no border-style is set, and does not set borders on all
sides when a style is set. Things get really ugly when borders are applied to inline styles. WinIE4 and
WinIE5 correctly handle borders on block-level elements, but ignore them for inlines.
5.5.16 border-color
Navigator 4.x and Opera 3.6 do not set colors on individual sides, as in border-color: red blue
green purple. Explorer cannot apply border colors to inline elements, since it does not apply borders
to inlines, but this is not penalized here.
5.5.17 border-style
Navigator 4.x does not reset the border-width to zero if border-style is none, but instead
incorrectly honors the width setting.
5.5.18 border-top
Opera 3 does not apply border styles to table elements, which is the reason for the “P” rating. IE4 and
IE5 do not apply borders to inline elements.
Cascading Style Sheets 2.0
164
5.5.19 border-right
Opera 3 does not apply border styles to table elements, which is the reason for the “P” rating. WinIE4
and WinIE5 do not apply borders to inline elements.
5.5.20 border-bottom
Opera 3 does not apply border styles to table elements, which is the reason for the “P” rating. IE5 and
IE5/Win do not apply borders to inline elements, which is the reason for those “P” ratings.
5.5.21 border-left
Opera 3 does not apply border styles to table elements, which is the reason for the “P” rating. IE4 and
IE5/Win do not apply borders to inline elements.
5.5.22 border
Opera 3 does not apply border styles to table elements, which is the reason for the “P” rating. IE4 and
IE5/Win do not apply borders to inline elements, which is the reason for those “P” ratings. Opera 5 has
an odd, semi-random bug that causes it to improperly place the border around the first inline element (or
part thereof) in the document. The border is drawn too high, making it appear as though the border has
been “superscripted” while the content remains where it should.
5.5.23 width
Navigator 4.x applies width in a very inconsistent fashion, but appears to honor it on most simple text
elements and images. WinIE4/5 applies it to images and tables, but ignores it for most text elements
such as P and headings. Opera 3.6, weirdly, seems to set the width of images to 100%—but this is
largely an illusion, since minimizing the window and then maximizing it again will reveal correctly sized
images.
5.5.25 float
float is one of the most complicated and hard-to-implement aspects of the entire specification. Basic
floating is generally supported by all browsers, especially on images, but when the specification is
closely tested, or the document structure becomes complicated, floating most often happens incorrectly,
or not at all. The floating of text elements is especially inconsistent, although IE5 and Opera have
cleaned up their act to a large degree, leaving WinIE4 and Nav4 the major transgressors in this respect.
Authors should use float with some care, and thoroughly test any pages employing it with great care.
Opera 4 seems to place floated elements a little bit off from where the “ideal” place would seem to be,
but in general, its support is extremely robust and can generally be counted upon.
5.5.26 clear
Like float, clear is not a simple thing to support. There is typically basic support, but as things get
more complicated, browser behavior tends to break down. Thoroughly test pages using this property.
5.6.1 display
inline
Opera 3.6 almost gets inline right, but seems to honor the occasional carriage return as though it
were a
element, instead of plain whitespace.
5.6.3 list-style-type
none
MacNav4 displays question marks for bullets when using this value.
Cascading Style Sheets 2.0
165
5.6.5 list-style-position
inside
The positioning and formatting of list-items when set to this value are a bit odd under MacIE4.
6.1 Length Units
ex
All supporting browsers (except one) appear to calculate ex as one-half em. This is arguably a
reasonable approximation, but it is technically incorrect. The exception is MacIE5, which actually goes
to some effort to determine the x-height of a given font.
6.3 Color Units

Navigator will generate a color for any apparent keyword. For example, color: invalidValue will
yield a dark blue, and color: inherit (a valid declaration under CSS2) comes out as a vaguely
nauseous green.
6.4 URLs

Navigator determines relative URLs with respect to the HTML document, not the stylesheet.
Chapter 8: CSS2 Quick Reference
Overview
The following table contains a terse description of each property in CSS2, for those times when you just
need to look something up quickly but don’t want to go flipping back and forth through the main part of
the book. The parenthetical number following each property name refers to the section of CSS2 which
describes the property. The column marked “Inh” shows whether or not the values of the given property
are inherited by descendant elements.
Cascading Style Sheets 2.0
166
Cascading Style Sheets 2.0
167
Cascading Style Sheets 2.0
168
Cascading Style Sheets 2.0
169
Cascading Style Sheets 2.0
170
Cascading Style Sheets 2.0
171
Cascading Style Sheets 2.0
172
Chapter 9: Useful Resources
While there isn’t nearly as much information about CSS as there is about HTML, there are still a number
of highly useful and very important resources available online. This chapter contains ten of the best.
Please note that the omission of a certain resource does not imply that it’s somehow inferior or flawed.
This list simply represents the author’s choices for ten highly useful sites which will provide great
information covering a broad range of subjects.
Tools
CSScheck (Web Design Group)
http://www.htmlhelp.com/tools/csscheck/
This CSS validator is one of the best for validating your CSS. Besides performing the valuable services
of catching typographical errors, malformed values and properties, as well as other problems,
CSScheck explains its results with clear messages and friendly graphics. It also catches common
mistakes by authors which aren’t actually errors; for example, declaring a color without a background or
vice versa. This is the best tool for beginning authors to check their work.
CSS Validator (World Wide Web Consortium)
http://jigsaw.w3.org/css-validator/
Although not nearly so user-friendly as CSScheck, this validator does have the advantage of being
maintained by the W3C—the very people who wrote the CSS specification. The error and warning
messages are quite terse, and the output can be a little tricky to decipher. Despite these problems, it’s a
very good validator and a valuable tool for the more experienced author.
Discussion Groups
Stylesheets Newsgroup (Usenet)
news:comp.infosystems.www.authoring.stylesheets
One of the most active CSS discussion communities, this group is a place for practical advice,
passionate arguments over theory, explorations of the subtleties of the CSS specification, and
everything in between. (Incidentally, due to its excessive length, the name of this group is often
abbreviated to “ciwas”—pronounced see-wass.) New authors are encouraged to read the group’s FAQs
(posted twice weekly) and make use of a CSS validator before posting questions. The group charter
does not prohibit discussion of style languages other than CSS, but, in practice, CSS-related messages
account for well over 95% of the group’s traffic. The signal-to-noise ratio is astonishingly high for a
Usenet group, at least for certain definitions of “signal.”
Style Discussion List (W3C)
http://lists.w3.org/Mail/Request
Sponsored by the World Wide Web Consortium, this list is a place to discuss the state of the CSS
specification, as well as proposals for future directions in CSS. “How to” and “help me” questions are
generally discouraged on this list.
Style Discussion List (HTML Writers Guild)
http://www.hwg.org/lists/hwg-style/index.html
The HWG maintains this list for authors who have “how to” and “help me” questions about style
languages like CSS. The bulk of list subscribers seem to be real-world Web page designers, so the
discussion is focused on what works and how browsers can be made to behave. As with ciwas, style
languages other than CSS are open for discussion on this list, but rarely ever come up.
Cascading Style Sheets 2.0
173
References
CSS Activity Page (W3C)
http://www.w3.org/Style/CSS/
If you’re looking for the official home of CSS, this is it. In addition to providing links to the CSS
specifications and drafts of new work in progress, the Activity Page provides news bulletins pointing out
new tools, resources, articles, and more CSS-related stuff. You can also find links to the history of CSS,
including proposals which were never adopted, pointers to other style languages, and a great deal
more. If you need to get a handle on what’s new and what’s coming soon, this is definitely the place to
go.
Style Sheets Reference Guide (Web Review)
http://www.webreview.com/style/
This site is home to the CSS Browser Compatibility Charts which form the basis for the chart found in
Chapter 7. In addition to the charts, it contains some basic CSS information like a simple CSS FAQ and
links to CSS-related articles on webreview.com. It’s also maintained by the author of this book.
The House of Style (Western Civilisation)
http://www.westciv.com/style_master/house/
This site is an eclectic collection of browser compatibility information, tutorials, pre-made stylesheets, a
CSS gallery, expert commentary and advice, and much more. The “good oil” articles alone make this a
site worth visiting. Even more impressive, it’s all the work of one man: John Allsopp, the author of Style
Master. (Note: Style Master is a commercial product. Endorsement of the House of Style does not imply
endorsement of Style Master.)
Agitprop
http://style.metrius.com/
If you’ve ever wondered how font sizing on the Web could be improved, you should visit this site without
delay. The font articles in particular should be required reading for any Web designer, especially those
who started out in the print-media world and think that the same design rules apply on the Web.
Agitprop is the work of Todd Fahrner, one of the most respected CSS experts in the world.
CSS Pointers Group
http://css.nu/
This site is home to hundreds of CSS-related links, a fair number of detailed browser bug lists, articles
on interesting effects and common workarounds, and much more. The CSS Pointers Group is
maintained by Jan Roland Eriksson and Sue Sims, two well-known CSS gurus.