[Skip to the Main Content]

The Most Common CSS Markup Errors

Or, What does CSS Reboot again illustrate about all other Sites?

The first article, CSS Reboot as Web Standards Validation Indicator quantified valid sites which participated in CSS Reboot Spring 2006. The second article, The Most Common HTML Markup Errors, qualified Markup errors. This article qualifies the most popular errors found in the CSS of sites found during validation process using The W3C CSS Validation Service Tool . Some of the errors are simple, fundamental errors. They are easily corrected. However, some of the errors are not errors.

All CSS underwent validation utilizing default settings: Warnings: Normal Report; Profile: CSS Version 2; and, Medium: All. This was performed intentionally. Cognoscenti may know to use “Advanced Settings” as well as the average user may not.

The data was categorized into three sections: “Author-Generated Errors” when errors were caused by the authors; “Vendor-Specific Errors” when proprietary code had been used; and, “Validator-Generated Errors” where the CSS Validator lacks compliance with the CSS Specifications!

The actual, offending source code has been included when necessary for understanding the CSS Validator's error. The applicable CSS specification verbiage when necessary, too.

The error types below were most common or, popular, errors.

Author-generated Errors

1. Typographical Errors

Line: 63 Context : h3
Invalid number : font-weight ligher is not a font-weight value : ligher
Line: 441 Context : #footer
Invalid number : margin Unknown dimension : 2x
Line: 199
Invalid number : color 00000 is not a valid color 3 or 6 hexadecimals numbers : #00000
Line: 102 Context : .primary .item .pagetitle
Invalid number : background Too many values or values are not recognized : ffffff
Line: 47 Context : #portfolio .right .c0
Invalid number : width only 0 can be a length. You must put an unit after your number : 280

The above examples are—Merely—typographical errors. Typographical errors were the most common error type.

The errors above are easily identified. The following error doesn’t make sense until you view the actual code in the style sheet.

2. Whitespace Errors

Line: 240
Parse error - Unrecognized : . label { font-style: italic; }

The actual code,

. label {
font-style: italic;
}

Whitespace exists between the class indicator, “.” and selector name. And, see the following error for something different utilizing whitespace.

Line: 324 Context : input#author
Invalid number : font only 0 can be a length. You must put an unit after your number : 1.0 em "Lucida Sans Unicode",Arial,Helvetica,Sans-Serif

The actual code,

input#author {
margin: 0;
padding: 2px;
font: 1.0 em "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
}

Whitespace exists between the font size and unit of measure.

And, there was a less frequent whitespace error: whitespace missing between properties when used in “shorthand” selectors.

3. Auto Errors

Line: 17 Context : body
Invalid number : padding auto is not a padding-right value : 0 auto

The actual code,

body {
margin: 0 auto;
padding: 0 auto;
background-color: #fff;
text-align: center;
font-family: "Trebuchet MS", Verdana, Arial, Serif;
font-size: 10pt;
color: #666;
}

The most common use of “auto” as a value is for horizontally centering block-level, non-replaced elements in normal flow by means of “margin: 0 auto;”. Padding doesn’t work. [See Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification, [W3C Working Draft 11 April 2006], 10 Visual formatting model details, 10.3 Calculating widths and margins should other uses be wanted.]

4. Compound Values Errors

Line: 616 Context : #formuway
Invalid number : width Too many values or values are not recognized : 100% px

The actual code,

#formuway {
color: #666;
width: 100%px;
text-align: center;
font-size: 8pt;
margin-bottom: 25px;
}

This error type was an odd one; it appeared in several different style sheets.

5. Important! Errors

Line: 573 Context : .imagelist ul li a img.lastfmimage
Parse Error - !important }

The actual code,

.imagelist ul li a img.lastfmimage {
height: 100px; !important
}

Cascading Style Sheets, level 2, CSS2 Specification, 4.1 Syntax, 4.1.8 Declarations and properties offers,

A declaration is either empty or consists of a property, followed by a colon (:), followed by a value. Around each of these there may be whitespace. Because of the way selectors work, multiple declarations for the same selector may be organized into semi-colon (;) separated groups.

Example(s):

Thus, the following rules:

H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }

are equivalent to:

H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal
}

Notice that last line: it has no closing semi-colon. Ignore that practice. For continuing (and, extending) the principles of “well-formedness”, always use a semi-colon to end all declarations which have single values. And, use a semi-color to end the final value in selectors with multiple values. Thus, !important which is part of the value must be set inside of the final semi-colon. Or, simply stated, “!important” always goes inside semi-colons.

6. Font Shorthand Errors

Line: 336 Context : #sidebar #searchform #s
Invalid number : font Parse Error - [empty string]

The actual code,

#sidebar #searchform #s {
width: 125px;
padding: 2px;
font: .8em;
}
Line: 412 Context : .primary .item .itemtext
Invalid number : font 'Lucida Grande' is not a font-size value : 'Lucida Grande', Verdana, Arial, Sans-Serif

The actual code,

.primary .item .itemtext {
font: 'Lucida Grande', Verdana, Arial, Sans-Serif;
text-align: justify;
font-size: 11px;
line-height: 16px;
color: #444;
}

Cascading Style Sheets, level 2 revision 1 CSS 2.1 Specification [W3C Working Draft 11 April 2006], 1 About the CSS 2.1 Specification, 1.4 Conventions, 1.4.3 Shorthand properties offers,

Some properties are shorthand properties, meaning that they allow authors to specify the values of several properties with a single property.

For instance, the 'font' property is a shorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', and 'font-family' all at once.

When values are omitted from a shorthand form, each "missing" property is assigned its initial value (see the section on the cascade).

Example(s):

The multiple style rules of this example:

h1 { 
font-weight: bold; 
font-size: 12pt;
line-height: 14pt; 
font-family: Helvetica; 
font-variant: normal;
font-style: normal;
}

may be rewritten with a single shorthand property:

h1 { font: bold 12pt/14pt Helvetica }

In this example, 'font-variant', and 'font-style' take their initial values.

That is the proper “font shorthand”. All of the preceding errors should have used an appropriate property, e.g., “font-size”. Please note the order of the “font shorthand” in the example above: it is the required sequence.

7. Errant Comma Errors

Line: 19 Context : body
Invalid number : font Too many values or values are not recognized : normal 80%/15px 'Trebuchet MS' Helvetica,Arial,Geneva,sans-serif

The actual code,

h1 {
font: normal 80%/15px 'Trebuchet MS' Helvetica, Arial, Geneva, sans-serif;
line-height: 18px;
color: #007CB9;
padding-bottom: 0px;
margin: 0;
}

A comma is missing after 'Trebuchet MS' since “'Trebuchet MS' Arial” confuses things.

Missing commas were popular.

8. Errant Semi-Colon Errors

Line: 57 Context : h2
Invalid number : font attempt to find a semi-colon before the property name. add it
h3 {
font: normal 1em 'Trebuchet MS' Arial, 'Times New Roman', Serif
color: #222;
padding: 0;
}

Notice the first declaration; it’s missing an ending semi-colon.

Missing semi-colons were popular, too.

9. Legacy Errors

Line: 604 Context : entry img.wp-smiley
Invalid number : vertical-align absmiddle is not a vertical-align value : absmiddle

The actual source code,

.entry img.wp-smiley {
float: none;
margin: 0;
vertical-align: absmiddle;
}

Cascading Style Sheets, level 2, CSS2 Specification, 10 Visual formatting model details, 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties, 10.8.1 Leading and half-leading, 'vertical-align' offers,

middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

Every legacy attribute was seen.

10. Underscore Hack Errors

Line: 110 Context : .secondary
Property _width doesn't exist : 28%

This is the underscore hack. [See The Underscore Hack as first published on November, 21 2003 by Wellstyled.]

Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification, 4 Syntax and basic data types, 4.1.1 Tokenization is often stated as allowing the underscore. It doesn’t.

4.1.2.1 Vendor-specific extensions states,

An initial dash or underscore is guaranteed never to be used in a property or keyword by any current or future level of CSS.

And, if one reads further, 4.1.3 Characters and case states,

The following rules always hold:

  • In CSS 2.1, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Only properties, values, units, pseudo-classes, pseudo-elements, and at-rules may start with a hyphen (-); other identifiers (e.g. element names, classes, or IDs) may not. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

11. None Errors

Line: 216 Context : #grav-signup-holder label.evil-checkbox input
Invalid number : background-color none is not a color value : none

The actual code,

#grav-signup-holder label.evil-checkbox input {
float: left;
background-color: none;
border: none;
}
Line: 183 Context : #quickiesChoice
Invalid number : font-weight none is not a font-weight value : none
Line: 100 Context : #maincontent li
Invalid number : padding none is not a padding-top value : none
Line: 100 Context : #maincontent li
Invalid number : margin none is not a margin-top value : none

Sample code,

#maincontent li {
padding: none;
margin: none;
}

The use of “none” was popular. It was used in conjunction with every possible attribute.

For values that require a number instead of “None” you must use numeral “0”; and, for background-colors, instead of “None” eliminate the use of “background-color” completely or use “Transparent”.

“display: none” works.

12. Cursor Hand Errors

Line: 393 Context : #right .image:hover
Invalid number : cursor hand is not a cursor value : hand
Line: 21 Context : a:link, a:visited, a:active
Invalid number : cursor hand is not a cursor value : hand

Cascading Style Sheets, level 2, CSS2 Specification, 18 User interface, 18.1 Cursors: the 'cursor' property offers

auto
The UA determines the cursor to display based on the currentcontext.
crosshair
A simple crosshair (e.g., short line segments resembling a "+" sign).
default
The platform-dependent default cursor. Often rendered as an arrow.
pointer
The cursor is a pointer that indicates a link.

but not “hand”.

13. Color Keyword Errors

Line: 336 Context : a:hover
Invalid number : color grey is not a color value : grey

The actual code,

a:hover {
text-decoration: underline;
color: grey;
font-weight: 700;
}

Cascading Style Sheets, level 2, CSS2 Specification, 4 CSS2 syntax and basic data types, 4.1.2 Keywords

Keywords have the form of identifiers. Keywords must not be placed between quotes ("..." or '...'). Thus,

red

is a keyword, but

"red"

is not. (It is a string.) Other illegal examples:

Illegal example(s):

width: "auto";
border: "none";
font-family: "serif";
background: "red";

And, 4 Syntax and basic data types, 4.1 Syntax, 4.3 Values, 4.3.6 Colors states,

A <color> is either a keyword or a numerical RGB specification.

The list of keyword color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Grey is not included in the list of keyword color names. It failed. And, different color keyword names were used. They failed. And, a few actual color keywords between quotes. They failed.

14. Muddled Specification Error

Line: 61 Context : h3
Invalid number : line-height Parse Error - [empty string]
h3 {
line-height: 1;
}

This selector fails but it’s faulty W3C text. The specification offers clues.

Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification [W3C Working Draft 11 April 2006], 10 Visual formatting model detail, 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties, 10.8.1 Leading and half-leading offers,

'line-height'
Value:  normal | <number> | <length> | <percentage> | inherit
Initial:  normal
Applies to:  all elements
Inherited:  yes
Percentages:  refer to the font size of the element itself
Media:  visual
Computed value:  for <length> and <percentage> the absolute value; otherwise as specified

On a block-level, table-cell, table-caption or inline-block element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the block's baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the block's font and line height properties (what TEX calls a "strut").

On an inline-level element, 'line-height' specifies the height that is used in the calculation of the line box height (except for inline replaced elements, where the height of the box is given by the 'height' property).

Values for this property have the following meanings:

normal
Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as <number>. We recommend a used value for 'normal' between 1.0 to 1.2. The computed value is 'normal'.
<length>
The specified length is used in the calculation of the line box height. Negative values are illegal.
<number>
The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value.
<percentage>
The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal.

The three rules in the example below have the same resultant line height:

div { line-height: 1.2; font-size: 10pt }     /* number */
div { line-height: 1.2em; font-size: 10pt }   /* length */
div { line-height: 120%; font-size: 10pt }    /* percentage */

The clues offered are as above. [Emphasis added.]

The integer “1” is incorrect; the number “1.0” is correct. The reason, as stated above, is that real numbers and integers must be specified in decimal notation as required by Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification, 4 Syntax and basic data types, 4.3 Values, 4.3.1 Integers and real numbers which states,

Some value types may have integer values (denoted by <integer>) or real number values (denoted by <number>). Real numbers and integers are specified in decimal notation only. [Elementary emphasis.] An <integer> consists of one or more digits "0" to "9". A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits. [Elementary Note: That’s “decimal notation”. How does one interpret those preceding sentences. One states “only” whereas the next offers an either/or condition.] Both integers and real numbers may be preceded by a "-" or "+" to indicate the sign.

Nevertheless, until the CSS Validator and it’s specifications are fixed, the ‘line-height’ value must be specified with decimal notation, e.g., “1.0” before validation occurs (even if this is the sole exception to CSS specifications, e.g., all commonly-used numbers should result in validation errors, e.g., font-sizes are not specified in decimal notation).

“The Underscore Hack” which by definition is considered to be vendor-specific by CSS v.2.1 cannot be corrected and, therefore, shall never pass validation. All remaining errors can and should be corrected. Why Validate Cascading Style Sheets? illustrates reasons for correcting errors for those who believe validation serves no purpose.

The W3C Markup Validation Service is exemplary in all aspects. The W3C CSS Tool’s lacking. Dismally.

Caveat

Do not use the default setting when validating CSS with the W3C CSS Validation Service. The default setting is CSS v.2!

Instead.

The Advanced Interfaces should be used, i.e.,

  • Validate by URI with extra options in the Advanced Interface.
  • Validate by File Upload with extra options in the Advanced File Upload Interface.
  • Validate by Direct Input with extra options in the Advanced Direct Input Interface.

where CSS version 2.1 (or, CSS version 3) can be selected.

It’ll be simpler.

[CSS Vendor-Specific Extentions fail is the next article in this series.]


Sean Fraser posted this on July 3, 2006 05:51 PM.

  • Add to Technorati Favorites
  • de.licio.us: http://www.elementary-group-standards.com/css/the-most-common-css-markup-errors.html
  • furl: http://www.elementary-group-standards.com/css/the-most-common-css-markup-errors.html
  • reddit: http://www.elementary-group-standards.com/css/the-most-common-css-markup-errors.html

Comments

James wrote this at September 15, 2006 01:25 PM

Nice analysis :-) I'm sure everyone knows but I thought I'd say anyway:

cursor:hand; is Internet Explorer 5's version of cursor:pointer;

Cheers - James.


Comments are closed.

The Elementary Standards: A Compendium of Web Standards, CSS, Linguistics and Search Engine Optimization methodology Copyright ©2005-2007 Sean Fraser. All work is published under a Creative Commons License. All Rights Reserved.

Palm trees on a grassy field in Hawai’i

Main Content Returns thus