Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 20th of October 2017 03:41:02 AM

Appendix D. CSS Support Chart

Contents:

Notes

As we've seen, browser compatibility -- or a lack thereof -- is the biggest obstacle to adoption of CSS. This appendix provides a comprehensive guide to how the browsers have implemented support for CSS1. Check this master list to get a rough idea of how well a given property and its values are supported.

This appendix uses the following key:

Y

Yes

N

No

P

Partial

B

Buggy

Q

Quirky

"Buggy" can refer to anything from mangled display to an actual browser crash. "Quirky" means that, while the browser is technically compliant with the specification, it acts in a fashion which authors may not expect.

This list and the notes that follow are current as of April 2000. For the latest information, please visit http://www.webreview.com/style/index.shtml.

The small box B in the lower-left corner of the element A is a child of A, which is in turn a child of a relatively positioned DIV. B was absolutely positioned, as was element A, using styles like these:

DIV {position: relative;}
P.A {position: absolute; top: 0; right: 0; width: 15em; height: auto;
margin-left: auto;}
P.B {position: absolute; bottom: 0; left: 0; width: 10em; height: 50%;
margin-top: auto;}

Spec Reference

Property or Value

Windows 95

Macintosh

Notes

   

NN4

IE3

IE4

IE5

Op3

NN4

IE3

IE4

IE5

1.1

Containment in HTML

P

P

P

P

Y

P

B

Y

Y

 
 

LINK

Y

Y

Y

Y

Y

Y

B

Y

Y

 
 

<STYLE>...</STYLE>

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

@import

N

N

Q

Q

Y

N

N

Y

Y

*

 

<x STYLE="dec;" >

B

Y

Y

Y

Y

B

Y

Y

Y

*

1.2

Grouping

Y

N

Y

Y

Y

Y

Y

Y

Y

 
 

x, y, z {dec;}

Y

N

Y

Y

Y

Y

Y

Y

Y

 

1.3

Inheritance

B

P

Y

Y

Y

B

B

Y

Y

*

 

(inherited values)

B

P

Y

Y

Y

B

B

Y

Y

 

1.4

Class selector

Y

B

Q

Q

Y

Y

B

Y

Y

*

 

.class

Y

B

Q

Q

Y

Y

B

Y

Y

 

1.5

ID selector

B

B

B

B

Y

B

B

B

Y

*

 

#ID

B

B

B

B

B

B

B

B

Y

 

1.6

Contextual selectors

Y

Y

Y

Y

Y

B

P

Y

Y

 
 

x y z {dec;}

Y

Y

Y

Y

Y

B

P

Y

Y

*

1.7

Comments

Y

B

Y

Y

Y

Y

Y

Y

Y

 
 

/* comment */

Y

B

Y

Y

Y

Y

Y

Y

Y

 

2.1

anchor

P

N

Y

Y

P

P

B

Y

Y

 
 

A:link

Y

N

Y

Y

Y

Y

B

Y

Y

 
 

A:active

N

N

Y

Y

N

N

N

Y

Y

 
 

A:visited

N

N

Y

Y

Y

N

B

Y

Y

 

2.3

first-line

N

N

N

N

Y

N

B

N

Y

*

 

:first-line

N

N

N

N

Y

N

B

N

Y

 

2.4

first-letter

N

N

N

N

Y

N

B

N

Y

*

 

:first-letter

N

N

N

N

Y

N

B

N

Y

 

3.1

important

N

N

Y

Y

Y

N

N

N

Y

 
 

!important

N

N

Y

Y

Y

N

N

N

Y

 

3.2

Cascading Order

B

P

Y

Y

Y

B

P

Y

Y

*

 

Weight sorting

B

Y

Y

Y

Y

B

Y

Y

Y

 
 

Origin sorting

B

Y

Y

Y

Y

B

B

Y

Y

 
 

Specificity sorting

B

P

Y

Y

Y

B

B

Y

Y

 
 

Order sorting

B

N

Y

Y

Y

B

N

Y

Y

 

5.2.2

font-family

Y

P

Y

Y

Y

Y

P

Y

Y

 
 

<family-name>

Y

Y

Y

Y

Y

Y

P

Y

Y

 
 

<generic-family>

P

P

Y

Y

P

Y

P

Y

Y

 
 

serif

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

sans-serif

Y

Y

Y

Y

Y

Y

N

Y

Y

 
 

cursive

N

B

Y

Y

N

Y

N

Y

Y

*

 

fantasy

N

B

Y

Y

Y

Y

N

Y

Y

 
 

monospace

Y

Y

Y

Y

Y

Y

Y

Y

Y

 

5.2.3

font-style

P

P

Y

Y

Y

P

P

Y

Y

 
 

normal

Y

Y

Y

Y

Y

Y

N

Y

Y

 
 

italic

Y

N

Y

Y

Y

Y

Y

Y

Y

 
 

oblique

N

N

Y

Y

Y

N

N

Y

Y

 

5.2.4

font-variant

N

N

P

P

Y

N

N

Y

Y

 
 

normal

N

N

Y

Y

Y

N

N

Y

Y

 
 

small-caps

N

N

Q

Q

Y

N

N

Q

Y

*

5.2.5

font-weight

P

P

Y

Y

Y

P

P

Y

Y

 
 

normal

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

bold

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

bolder

Y

Y

Y

Y

Y

N

N

Y

Y

 
 

lighter

N

Y

Y

Y

Y

N

N

Y

Y

 
 

100-900

Y

N

Y

Y

Y

Y

N

Y

Y

 

5.2.6

font-size

Y

P

P

P

Y

Y

P

Q

Y

 
 

<absolute-size>

Y

Y

Q

Q

Y

Y

B

Q

Y

 
 

xx-small - xx-large

Y

Y

Q

Q

Y

Y

B

Q

Y

*

 

<relative-size>

Y

Y

Y

Y

Y

Y

N

Y

Y

 
 

larger

Y

Y

Y

Y

Y

Y

N

Y

Y

 
 

smaller

Y

Y

Y

Y

Y

Y

N

Y

Y

 
 

<length>

Y

P

Y

Y

Y

Y

B

Y

Y

 
 

<percentage>

Y

Y

Y

Y

Y

Y

P

Y

Y

 

5.2.7

font

P

P

P

P

Y

P

P

Q

Y

 
 

<font-family>

P

Y

Y

Y

Y

Y

P

Y

Y

 
 

<font-style>

P

P

Y

Y

Y

Y

P

Y

Y

 
 

<font-variant>

N

N

P

P

Y

N

N

Q

Y

 
 

<font-weight>

P

Y

Y

Y

Y

Y

N

Y

Y

 
 

<font-size>

Y

B

Q

Q

Y

Y

B

Y

Y

 
 

<line-height>

B

Y

Y

Y

Y

B

B

Y

Y

 

5.3.1

color

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

<color>

Y

Y

Y

Y

Y

Y

Y

Y

Y

 

5.3.2

background-color

B

P

Y

Y

Y

B

N

Y

Y

 
 

<color>

B

B

Y

Y

Y

B

N

Y

Y

*

 

transparent

B

N

Y

Y

Y

B

N

Y

Y

*

5.3.3

background-image

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

<url>

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

none

Y

N

Y

Y

Y

Y

N

Y

Y

 

5.3.4

background-repeat

P

N

P

Y

Y

B

N

Y

Y

 
 

repeat

Y

N

B

Y

Y

Y

N

Y

Y

*

 

repeat-x

P

N

B

Y

Y

P

N

Y

Y

*

 

repeat-y

P

N

B

Y

Y

P

N

Y

Y

*

 

no-repeat

Y

N

Y

Y

Y

Y

N

Y

Y

 

5.3.5

background-attachment

N

N

Y

Y

N

N

N

Y

Y

 
 

scroll

N

N

Y

Y

N

N

N

Y

Y

 
 

fixed

N

N

Y

Y

N

N

N

Y

Y

 

5.3.6

background-position

N

N

Y

Y

Y

N

N

Y

Y

 
 

<percentage>

N

N

Y

Y

Y

N

N

Y

Y

 
 

<length>

N

N

Y

Y

Y

N

N

Y

Y

 
 

top

N

N

Y

Y

Y

N

N

Y

Y

 
 

center

N

N

Y

Y

Y

N

N

Y

Y

 
 

bottom

N

N

Y

Y

Y

N

N

Y

Y

 
 

left

N

N

Y

Y

Y

N

N

Y

Y

 
 

right

N

N

Y

Y

Y

N

N

Y

Y

 

5.3.7

background

P

P

P

Y

P

P

P

Y

Y

 
 

<background-color>

B

P

Y

Y

Y

P

P

Y

Y

 
 

<background-image>

P

Y

Y

Y

Y

P

Y

Y

Y

 
 

<background-repeat>

P

B

B

Y

Y

P

B

Y

Y

 
 

<background-attachment>

N

N

Y

Y

N

N

Y

Y

Y

 
 

<background-position>

N

N

Y

Y

Y

N

P

Y

Y

 

5.4.1

word-spacing

N

N

N

N

Y

N

N

Y

Y

 
 

normal

N

N

N

N

Y

N

N

Y

Y

 
 

<length>

N

N

N

N

Y

N

N

Y

Y

 

5.4.2

letter-spacing

N

N

Y

Y

Y

N

N

Y

Y

 
 

normal

N

N

Y

Y

Y

N

N

Y

Y

 
 

<length>

N

N

Y

Y

Y

N

N

Y

Y

 

5.4.3

text-decoration

Q

P

P

P

P

Q

P

P

P

 
 

none

Q

N

Q

Q

Y

Q

Y

Q

Y

*

 

underline

Q

B

Q

Q

Y

Q

B

Q

Y

 
 

overline

N

N

Y

Y

Y

N

N

Y

Y

 
 

line-through

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

blink

Y

N

N

N

N

Y

N

N

N

*

5.4.4

vertical-align

N

N

P

P

P

N

N

P

Y

 
 

baseline

N

N

Y

Y

Y

N

N

Y

Y

 
 

sub

N

N

Y

Y

Y

N

N

Y

Y

 
 

super

N

N

Y

Y

Y

N

N

Y

Y

 
 

top

N

N

N

N

B

N

N

Y

Y

 
 

text-top

N

N

N

N

N

N

N

Y

Y

 
 

middle

N

N

B

N

B

N

N

Y

Y

 
 

bottom

N

N

N

N

B

N

N

B

Y

 
 

text-bottom

N

N

N

N

N

N

N

B

Y

 
 

<percentage>

N

N

N

N

Y

N

N

B

Y

 

5.4.5

text-transform

Y

N

Y

Y

P

Y

N

Y

Y

 
 

capitalize

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

uppercase

Y

N

Y

Y

B

Y

N

Y

Y

*

 

lowercase

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

none

Y

N

Y

Y

Y

Y

N

Y

Y

 

5.4.6

text-align

Y

P

Y

Y

Y

P

P

P

Y

 
 

left

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

right

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

center

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

justify

B

N

Y

Y

Y

B

N

N

Y

*

5.4.7

text-indent

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

<length>

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

<percentage>

Y

Y

Y

Y

Y

Y

Y

Y

Y

 

5.4.8

line-height

P

P

Y

Y

Q

P

P

Y

Y

*

 

normal

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

<number>

P

N

Y

Y

Y

P

B

Y

Y

 
 

<length>

B

Y

Y

Y

Y

B

B

Y

Y

*

 

<percentage>

P

Y

Y

Y

Y

P

B

Y

Y

 

5.5.01

margin-top

P

B

P

P

Y

P

B

P

Y

*

 

<length>

P

B

P

P

Y

P

B

P

Y

 
 

<percentage>

P

Y

P

P

Y

P

B

P

Y

 
 

auto

P

Y

P

P

Y

P

B

P

Y

 

5.5.02

margin-right

B

P

P

P

Y

B

P

P

Y

*

 

<length>

B

Y

P

P

Y

B

Y

P

Y

 
 

<percentage>

B

N

P

P

Y

B

Y

P

Y

 
 

auto

N

N

N

N

Y

N

N

P

Y

 

5.5.03

margin-bottom

N

Y

P

P

Y

N

N

P

Y

*

 

<length>

N

N

P

P

Y

N

N

P

Y

 
 

<percentage>

N

N

P

P

Y

N

N

P

Y

 
 

auto

N

N

P

P

Y

N

N

P

Y

 

5.5.04

margin-left

B

P

P

P

Y

B

P

P

Y

*

 

<length>

B

Y

P

P

Y

Y

Y

P

Y

 
 

<percentage>

B

Y

P

P

Y

B

Y

P

Y

 
 

auto

N

N

N

N

Y

B

N

P

Y

 

5.5.05

margin

B

B

P

P

Y

B

B

P

Y

*

 

<length>

B

B

P

P

Y

B

B

P

Y

 
 

<percentage>

B

Y

P

P

Y

B

B

P

Y

 
 

auto

N

Y

P

P

Y

N

B

P

Y

 

5.5.06

padding-top

B

N

P

P

Y

B

N

P

Y

*

 

<length>

B

N

P

P

Y

B

N

P

Y

 
 

<percentage>

B

N

P

P

Y

B

N

P

Y

 

5.5.07

padding-right

B

N

P

P

Y

B

N

P

Y

*

 

<length>

B

N

P

P

Y

B

N

P

Y

 
 

<percentage>

B

N

P

P

Y

B

N

P

Y

 

5.5.08

padding-bottom

B

N

P

P

Y

B

N

P

Y

*

 

<length>

B

N

P

P

Y

B

N

P

Y

 
 

<percentage>

B

N

P

P

Y

B

N

P

Y

 

5.5.09

padding-left

B

N

P

P

Y

B

N

P

Y

*

 

<length>

B

N

P

P

Y

B

N

P

Y

 
 

<percentage>

B

N

P

P

Y

B

N

P

Y

 

5.5.10

padding

B

N

P

P

B

B

N

P

Y

*

 

<length>

B

N

P

P

B

B

N

P

Y

 
 

<percentage>

B

N

P

P

B

B

N

P

Y

 

5.5.11

border-top-width

B

N

P

P

Y

B

N

P

Y

*

 

thin

Y

N

P

P

Y

Y

N

P

Y

 
 

medium

Y

N

P

P

Y

Y

N

P

Y

 
 

thick

Y

N

P

P

Y

Y

N

P

Y

 
 

<length>

Y

N

P

P

Y

Y

N

P

Y

 

5.5.12

border-right-width

B

N

P

P

Y

B

N

P

Y

*

 

thin

Y

N

P

P

Y

Y

N

P

Y

 
 

medium

Y

N

P

P

Y

Y

N

P

Y

 
 

thick

Y

N

P

P

Y

Y

N

P

Y

 
 

<length>

Y

N

P

P

Y

Y

N

P

Y

 

5.5.13

border-bottom-width

B

N

P

P

Y

B

N

P

Y

*

 

thin

B

N

P

P

Y

B

N

P

Y

 
 

medium

B

N

P

P

Y

B

N

P

Y

 
 

thick

B

N

P

P

Y

B

N

P

Y

 
 

<length>

B

N

P

P

Y

B

N

P

Y

 

5.5.14

border-left-width

B

N

P

P

Y

B

N

P

Y

*

 

thin

Y

N

P

P

Y

Y

N

P

Y

 
 

medium

Y

N

P

P

Y

Y

N

P

Y

 
 

thick

Y

N

P

P

Y

Y

N

P

Y

 
 

<length>

Y

N

P

P

Y

Y

N

P

Y

 

5.5.15

border-width

B

N

P

P

Y

B

N

P

Y

*

 

thin

Y

N

P

P

Y

Y

N

P

Y

 
 

medium

Y

N

P

P

Y

Y

N

P

Y

 
 

thick

Y

N

P

P

Y

Y

N

P

Y

 
 

<length>

Y

N

P

P

Y

Y

N

P

Y

 

5.5.16

border-color

P

N

Y

Y

Y

P

N

Y

Y

*

 

<color>

P

N

Y

Y

Y

P

N

Y

Y

 

5.5.17

border-style

P

N

P

P

Y

P

N

Y

Y

 
 

none

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

dotted

N

N

N

N

Y

N

N

Y

Y

 
 

dashed

N

N

N

N

Y

N

N

Y

Y

 
 

solid

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

double

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

groove

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

ridge

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

inset

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

outset

Y

N

Y

Y

Y

Y

N

Y

Y

 

5.5.18

border-top

N

N

P

P

Y

N

N

P

Y

*

 

<border-top-width>

N

N

P

P

Y

N

N

P

Y

 
 

<border-style>

N

N

P

P

Y

N

N

P

Y

 
 

<color>

N

N

P

P

Y

N

N

P

Y

 

5.5.19

border-right

N

N

P

P

Y

N

N

P

Y

*

 

<border-right-width>

N

N

P

P

Y

N

N

P

Y

 
 

<border-style>

N

N

P

P

Y

N

N

P

Y

 
 

<color>

N

N

P

P

Y

N

N

P

Y

 

5.5.20

border-bottom

N

N

P

P

Y

N

N

P

Y

*

 

<border-bottom-width>

N

N

P

P

Y

N

N

P

Y

 
 

<border-style>

N

N

P

P

Y

N

N

P

Y

 
 

<color>

N

N

P

P

Y

N

N

P

Y

 

5.5.21

border-left

N

N

P

P

Y

N

N

P

Y

*

 

<border-left-width>

N

N

P

P

Y

N

N

P

Y

 
 

<border-style>

N

N

P

P

Y

N

N

P

Y

 
 

<color>

N

N

P

P

Y

N

N

P

Y

 

5.5.22

border

P

N

P

P

Y

P

N

P

Y

*

 

<border-width>

B

N

P

P

Y

B

N

P

Y

 
 

<border-style>

P

N

P

P

Y

P

N

P

Y

 
 

<color>

Y

N

P

P

Y

Y

N

P

Y

 

5.5.23

width

P

N

P

P

Q

P

N

Y

Y

*

 

<length>

P

N

P

P

Q

P

N

Y

Y

 
 

<percentage>

P

N

P

P

Q

P

N

Y

Y

 
 

auto

P

N

P

P

Q

P

N

Y

Y

 

5.5.24

height

N

N

Y

Y

Y

N

N

Y

Y

 
 

<length>

N

N

Y

Y

Y

N

N

Y

Y

 
 

auto

N

N

Y

Y

Y

N

N

Y

Y

 

5.5.25

float

P

N

P

P

B

P

N

B

Q

*

 

left

B

N

B

B

Y

B

N

Y

Y

 
 

right

B

N

B

B

Y

B

N

Y

Y

 
 

none

Y

N

Y

Y

Y

Y

N

Y

Y

 

5.5.26

clear

P

N

P

P

B

P

N

Y

Y

*

 

none

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

left

B

N

B

B

N

B

N

Y

Y

 
 

right

B

N

B

B

Y

B

N

Y

Y

 
 

both

Y

N

Y

Y

Y

Y

N

Y

Y

 

5.6.1

display

P

N

P

P

P

P

N

P

Y

 
 

block

B

N

N

Y

Y

B

N

P

Y

 
 

inline

N

N

N

Y

B

N

N

N

Y

*

 

list-item

B

N

N

N

N

P

N

P

Y

 
 

none

Y

N

Y

Y

Y

Y

N

Y

Y

 

5.6.2

white-space

P

N

N

N

N

P

N

N

Y

 
 

normal

Y

N

N

N

N

Y

N

N

Y

 
 

pre

Y

N

N

N

N

Y

N

N

Y

 
 

nowrap

N

N

N

N

N

N

N

N

Y

 

5.6.3

list-style-type

Y

N

Y

Y

Y

P

N

Y

Y

 
 

disc

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

circle

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

square

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

decimal

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

lower-roman

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

upper-roman

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

lower-alpha

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

upper-alpha

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

none

Y

N

Y

Y

Y

B

N

Y

Y

*

5.6.4

list-style-image

N

N

Y

Y

Y

N

N

Y

Y

 
 

<url>

N

N

Y

Y

Y

N

N

Y

Y

 
 

none

N

N

Y

Y

Y

N

N

Y

Y

 

5.6.5

list-style-position

N

N

Y

Y

Y

N

N

Y

Y

 
 

inside

N

N

Y

Y

Y

N

N

Q

Y

*

 

outside

N

N

Y

Y

Y

N

N

Y

Y

 

5.6.6

list-style

P

N

P

Y

Y

P

N

P

Y

 
 

<keyword>

Y

N

Y

Y

Y

P

N

Y

Y

 
 

<position>

N

N

Q

Q

Y

N

N

Q

Y

 
 

<url>

N

N

Y

Y

Y

N

N

Y

Y

 

6.1

Length Units

P

P

Y

Y

Y

Y

B

Y

Y

 
 

em

Y

N

Y

Y

Y

Y

Y

Y

Y

 
 

ex

Q

N

Q

Q

Q

Q

Q

Q

Y

*

 

px

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

in

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

cm

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

mm

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

pt

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

pc

Y

Y

Y

Y

Y

Y

Y

Y

Y

 

6.2

Percentage Units

Y

Y

Y

Y

Y

Y

Y

Y

Y

 
 

<percentage>

Y

Y

Y

Y

Y

Y

Y

Y

Y

 

6.3

Color Units

P

P

Y

Y

Y

P

P

Y

Y

 
 

#000

Y

Y

Y

Y

Y

Y

B

Y

Y

 
 

#000000

Y

Y

Y

Y

Y

Y

B

Y

Y

 
 

(RRR,GGG,BBB)

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

(R%,G%,B%)

Y

N

Y

Y

Y

Y

N

Y

Y

 
 

<keyword>

B

Y

Y

Y

Y

B

Y

Y

Y

*

6.4

URLs

B

Y

Y

Y

Y

B

B

Y

Y

 
 

<url>

B

Y

Y

Y

Y

B

B

Y

Y

*

D.1. 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 style sheet. This is technically in violation of the CSS1 specification, although not a major failing; thus the "Quirk" rating.

1.1 Containment in HTML: <x STYLE="dec;" >

Navigator 4 has particular trouble with list items, which is most of the reason for the "Buggy" 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. It is allowed in CSS2.

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 properly an error-checking problem, not a failing of the CSS implementations, but I feel it is significant enough to warrant the ratings shown.

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.

2.3 :first-line

IE3 incorrectly applies styles to the entire element.

2.4 :first-letter

IE3 incorrectly applies styles to the entire element.

3.2 Cascading Order

Again, there are simply far too many instances of problems to list here.

5.2.2 font-family: cursive

Despite a preferences setting for cursive fonts, Opera does not seem to apply the preference, but instead substitutes another font. This may vary by system, as others have reported no trouble with this feature.

5.2.4 font-variant: small-caps

IE4/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.

5.2.6 font-size: xx-small through xx-large

IE4/5's values for absolute sizes assigns small to be the same size as unstyled text, instead of medium , as one might expect. Thus, declaring an absolute font size (such as font-size: 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:<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 near-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.

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.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 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 exception to this is Opera, which implements the specification correctly.

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: <length>

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. In the case of margin-top, support is pretty good on block-level elements in Nav4 and IE4/IE5, and appears to be perfect in Opera 3.6.

5.5.02 margin-right

All margin properties seem to be problematic, or else completely unsupported, on inline elements. In the case of margin-right, support is pretty good on block-level elements in IE4 and IE5, while with inline elements, IE4 and IE5 ignore this property completely. Navigator does fairly well so long as margins are not applied to floating or inline elements, in which case major bugs can be tripped.

5.5.03 margin-bottom

All margin properties seem to be problematic, or else completely unsupported, on inline elements. In the case of margin-bottom, support is pretty good on block-level elements in IE4 and IE5, while with inline elements, IE4 and IE5 ignore this property completely. Navigator does fairly well so long as margins are not applied to floating or inline elements, in which case major bugs can be tripped.

5.5.04 margin-left

All margin properties seem to be problematic, or else completely unsupported, on inline elements. In the case of margin-left, support is pretty good on block-level elements in IE4 and IE5, while with inline elements, IE4 and IE5 ignore this property completely. Navigator does fairly well so long as margins are not applied to floating or inline elements, in which case major bugs can be tripped.

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 IE4 and IE5, while with inline elements, IE4 and IE5 ignore this property completely. Navigator does fairly well so long as margins are not applied to floating or inline elements, in which case major bugs can be tripped.

5.5.06 padding-top

All padding properties seem to be problematic, or else completely unsupported, on inline elements. In the case of padding-top, support is pretty good on block-level elements in IE4 and IE5. Navigator does fairly well so long as margins are not applied to floating or inline elements, in which case major bugs can be tripped.

5.5.07 padding-right

All padding properties seem to be problematic, or else completely unsupported, on inline elements. In the case of padding-right, support is pretty good on block-level elements in IE4 and IE5. Navigator does fairly well so long as margins are not applied to floating or inline elements, in which case major bugs can be tripped.

5.5.08 padding-bottom

All padding properties seem to be problematic, or else completely unsupported, on inline elements. Navigator 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.09 padding-left

All padding properties seem to be problematic, or else completely unsupported, on inline elements. Navigator 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.10 padding

All padding properties seem to be problematic, or else completely unsupported, on inline elements. Opera correctly ignores negative padding values (although Opera 3.5 applied negative padding), but will alter the line height based on values of padding applied to inline elements, which is incorrect. Navigator 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

Navigator 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. IE4 and IE5 correctly handle borders on block-level elements, but ignore them for inlines.

5.5.12 border-right-width

Navigator 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. IE4 and IE5 correctly handle borders on block-level elements, but ignore them for inlines.

5.5.13 border-bottom-width

Navigator 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. IE4 and IE5 correctly handle borders on block-level elements, but ignore them for inlines.

5.5.14 border-left-width

Navigator 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. IE4 and IE5 correctly handle borders on block-level elements, but ignore them for inlines.

5.5.15 border-width

Navigator 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. IE4 and IE5 correctly handle borders on block-level elements, but ignore them for inlines.

5.5.16 border-color

Nav4 and Opera 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.18 border-top

IE4 and IE5 do not apply borders to inline elements.

5.5.19 border-right

IE4 and IE5 do not apply borders to inline elements.

5.5.20 border-bottom

IE4 and IE5 do not apply borders to inline elements.

5.5.21 border-left

IE4 and IE5 do not apply borders to inline elements.

5.5.22 border

IE4 and IE5 do not apply borders to inline elements.

5.5.23 width

Navigator applies width in an 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 like 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 hardest-to-implement aspects of the entire CSS1 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.

5.5.26 clear

Like float, clear is not a simple thing to support. Again, basic support is there, but as things get more complicated, browser behavior breaks 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 BR element, instead of plain whitespace.

5.6.3 list-style-type: none

MacNav4 displays question marks for bullets when using this value.

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 appear to calculate ex as one-half em. This is arguably a reasonable approximation, but it is technically incorrect.

6.3 Color Units :<keyword>

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:<url>

Navigator determines relative URLs with respect to the HTML document, not the style sheet.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

Therefore, the last item in the list has a bottom margin of 20 pixels, the bottom margin of the UL is 10 pixels, and the top margin of a succeeding H1 is 28 pixels. Given all this, once the margins have been collapsed (or, if you prefer, overlapped), the distance between the end of the LI and the beginning of the H1 is 28 pixels, as shown in Figure 7-17.

Figure 7-17

Figure 7-17. Collapsing in detail

This collapsing behavior only applies to margins. Padding andon the foreground color of images. Since images are already composed of colors, you can't really affect them using color, but you can change the color of any border that appears around the image. This can be done using either color or border-color. Therefore, the following rules will have the same visual effect on images of class type1 and type2, as shown in Figure 6-8:

effects. This example is shown in Figure 6-18:

P {color: black;}H1 {color: white; background-color: rgb(20%,20%,20%);}
Figure 6-18

Figure 6-18. A nifty effect for H1 elements

This shows but one example of how displays can be dramaticallychanged with just a few styles. Of course, there are as manycombinations as there are colors, but we can't exactly showthem here -- being stuck in grayscale as we are -- however,we'll try to give you some idea of what you can do. Here are a

<DIV CLASS="navbar">icons</DIV>

Now all we need is the style .navbar{background: green;} andwe're set. Or are we?

Not quite, no. In the old page, the navigation bar was separated slightly fromthe main display, but ran right up against the sidebar, therebycreating a sort of inverted green "L" shape. We want to