Summary You now have the tools and knowledge to diagnose and fix the major issues you’re likely to encounter developing with (X)HTML and CSS. No CSS problem is impossible to solve; it just takes patience and a logical process, along with a handful of resources and reference material. If you fol- low these suggestions, you’ll be able to hold onto most of your sanity during the testing process. CHAPTER 14 ■ EVERYTHING FALLS APART322 732Xch14FINAL.qxd 11/1/06 2:22 PM Page 322 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CSS Reference A ppendix A serves as a full reference to all CSS 2.1 properties, including basic browser sup- port information for the four most commonly used desktop browsers: Firefox, Safari, Opera, and Internet Explorer. CSS Units, Keywords, and Other Property Values CSS includes a fixed set of units and keywords as values for several of its properties. The first section of this appendix covers these property values. Later in the appendix, when we cover individual properties you’ll find references to these predefined values. Factors and Integers Numeric values in CSS can be either factors (decimal numbers) or integers (whole numbers). In most cases, negative versions of both are allowed. Colors CSS colors can be specified as a red, green, and blue (RGB) value, a hexadecimal value, or one of 17 predefined color name keywords. Few web designers use RGB values. Hexadecimal is the most common method used, followed by color keywords. Hexadecimal Value A hexadecimal value is the hash symbol, or pound sign (#), followed by pairs of hexadecimal digits specifying red, green, and blue components of the intended color. Hexadecimal digits are numbers or letters in the range 0–9 or a–f. Three-digits shortcuts in the form #rgb can be substituted for #rrggbb. Examples: #50017c, #d0cecf, #dfdfdf, #f80, #9c0 323 APPENDIX A ■ ■ ■ 732XchAppAFINAL.qxd 11/1/06 2:24 PM Page 323 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Color Name The available color names are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. RGB Value Red, green, and blue components are specified as either percentages or integers in the range 0–255. Examples: rgb(100%, 50%, 0%), rgb(255, 128, 0) Fonts The different font families and system font keywords are listed here. Generic Font Families First, here are the generic font families: • Sans-serif •Serif • Monospace • Cursive • Fantasy System Font Keywords There are six possible system font keywords: caption, icon, menu, message-box, small-caption, and status-bar. These are not intended to be used by CSS designers, but rather are used by the browsers themselves. They’re included here for the sake of completeness, but you, as the CSS author, needn’t concern yourself with them that much. Length CSS lengths are indicated as a decimal number followed by an absolute or relative unit. All CSS length values must include a unit, unless that value is 0. Also, note that the line-height property can accept a number without a unit, but this is actually a scaling factor, not a length. Absolute Units Absolute units that can accompany length values include the following: • mm (millimeter) • cm (centimeter) • in (inch) • pt (point) • pc (pica) APPENDIX A ■ CSS REFERENCE324 732XchAppAFINAL.qxd 11/1/06 2:24 PM Page 324 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Relative Units Relative units that can accompany length values include the following: • em (size of em square in current font) • ex (size of x-height in current font) • px (pixel) Percentages Several CSS properties allow for percentages as values. A percentage in CSS is indicated as a decimal number in the range 0–100 followed by a percent symbol (%). Position Keywords Five position keywords as available as values for several properties: left, right, center, top, and bottom. URLs Some properties can take a URL to a file (often an image) as a value. In these cases, the possible syntaxes are as follows: url(protocol://server/pathname) url(pathname) Properties That Accept Multiple Instances The following properties can be used to set the associated individual top, right, bottom, and left properties: margin, padding, border-width, border-style, and border-color. When multiple instances of a property are used, the following ordering applies: top, right, bottom, left (clockwise around the element). Examples include • margin: 1em; /* all margins set to 1em */ • margin: 1em 2em; /* top and bottom margin set to 1em, left and right margin set to 2em */ • margin: 1em 2em 3em; /* top margin set to 1em, left and right margin set to 2em, bottom margin set to 3em */ • margin: 1em 2em 3em 4em; /* top, right, bottom, left, respectively */ Inherit The keyword inherit is a valid value for all CSS properties. Anytime inherit is stated, the associated property will be set to the same value as the parent of the selected element or elements. Most properties inherit naturally, so many times you will not need to specify it explicitly, but it is available if you need it. APPENDIX A ■ CSS REFERENCE 325 732XchAppAFINAL.qxd 11/1/06 2:24 PM Page 325 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CSS Properties The following is a reference to all CS properties. In the Value component of each, the pipe character (|) indicates the word “or.” In the “Supported by” component, Firefox refers to Firefox 1.5, Safari refers to Safari 2.0, Opera refers to Opera 9, and Internet Explorer refers to Internet Explorer 6 (the current versions of these browsers at the time of this writing). Typefaces, Text Color, Text Size, and Similar Properties The following properties control the appearance of text on your page. color Indicates the text color. Note that the value of the color property is also applied for text decorations (such as underlines) and as an initial value for border colors (but it’s overridden if a border color is explicitly specified). Value: <rgb value> | <hexadecimal value> | <color name> Initial value: Determined by user agent Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer font A shorthand property for specifying all font properties as well as line height. Value: font-style font-variant font-weight font-size/line-height font-family | <system font keyword> Initial value: See individual properties Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer ■ Note line-height is optional. font-style , font-variant , and font-weight are optional and may appear in any order. font-family Indicates the font family (typeface) to be used. The first listed font family (whether specific or generic) found to be available to the user agent will be used. APPENDIX A ■ CSS REFERENCE326 732XchAppAFINAL.qxd 11/1/06 2:24 PM Page 326 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Value: A comma-separated list of <specific font families> | <generic font families> Initial value: Determined by user agent Inherited: yes Applies to: all elements (except replaced elements) Supported by: Firefox, Safari, Opera, Internet Explorer font-size Indicates the size of the type. Note that sizes refer to the size of the font’s em square, not the size of any particular character within the font. Value: <length> | <percentage> | <absolute size> | <relative size> | xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger Initial value: medium Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer font-style Used to specify an oblique or italic style within the current font family. Value: normal | italic | oblique Initial value: normal Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer font-variant Used to specify a small-caps style within the current font family. Value: normal | small-caps Initial value: normal Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer APPENDIX A ■ CSS REFERENCE 327 732XchAppAFINAL.qxd 11/1/06 2:24 PM Page 327 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. font-weight Used to specify the weight of the current font. Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 800 | 800 | 900 Initial value: normal Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer text-decoration Used to specify underlining, overlining, strikeout, and blinking effects. Value: none | any combination of: underline, overline, line-through, blink Initial value: none Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer text-transform Used to specify the case of text. Value: capitalize | uppercase | lowercase | none Initial value: none Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer Type Spacing and Alignment CSS offer several properties related to the spacing and alignment of type. white-space Used to specify how tabs, line breaks, and extra whitespace in an element’s content are handled. Value: normal | pre | nowrap | pre-wrap | pre-line Initial value: normal Inherited: Yes Applies to: Block-level elements Supported by: Firefox, Safari, Opera, Internet Explorer (see note) APPENDIX A ■ CSS REFERENCE328 732XchAppAFINAL.qxd 11/1/06 2:24 PM Page 328 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. ■ Note No major browser supports pre-wrap and pre-line . text-align Used to specify the horizontal alignment of text. Value: left | right | center | justify Initial value: Determined by user agent Inherited: Yes Applies to: Block-level elements Supported by: Firefox, Safari, Opera, Internet Explorer text-indent Used to specify the indention of the first line of text. Value: <length> | <percentage> Initial value: 0 Inherited: Yes Applies to: Block-level elements Supported by: Firefox, Safari, Opera, Internet Explorer line-height Used to specify the distance between baselines of lines of text. Value: <factor> | <length> | <percentage> Initial value: Determined by user agent Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer word-spacing Used to specify an additional amount of space to be added between words in text. Negative lengths can be used to reduce space between words. Value: normal | <length> Initial value: normal Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer APPENDIX A ■ CSS REFERENCE 329 732XchAppAFINAL.qxd 11/1/06 2:24 PM Page 329 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. letter-spacing Used to specify an additional amount of space to be added between letters in text. Negative lengths can be used to reduce space between letters. Value: normal | <length> Initial value: normal Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer vertical-align Used to raise or lower letters and images above or below the baseline of text. Value: <percentage> | <length> | sub | super | top | text-top | middle | bottom | text-bottom Initial value: baseline Inherited: no Applies to: Inline elements and table cells Supported by: Firefox, Safari, Opera, Internet Explorer direction Used to specify the writing direction, the direction of table column layout, the direction of horizontal overflow, and the position of incomplete last lines of text. Value: ltr | trl Initial value: ltr Inherited: Yes Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer unicode-bidi Controls the Unicode standard bidirectional rendering algorithm. Value: normal | embed | bidi-override Initial value: normal Inherited: No Applies to: All elements Supported by: Firefox, Opera, Internet Explorer APPENDIX A ■ CSS REFERENCE330 732XchAppAFINAL.qxd 11/1/06 2:24 PM Page 330 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Box Model Next we look at the various properties that can be used to control the box model of your page elements. margin A shorthand property used to specify all four individual margin properties in one step. Value: Multiple instances of <length> | <percentage> | auto Initial value: 0 Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer margin-top, margin-right, margin-bottom, margin-left Used to specify the space between the element’s bounding box and the bounding boxes of adjacent elements. Value: <length> | <percentage> | auto Initial value: Determined by user agent, and different for different elements Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer (see note) ■ Note In Internet Explorer 6 and lower, several margin-related bugs are exhibited. Among them: margins may double when element is floated, percentages may refer to the incorrect parent element, and auto may act in an unexpected manner when elements are absolutely positioned. The Position Is Everything web site ( www.positioniseverything.net/ ) covers all IE 6 bugs in exhaustive detail. padding Used to specify all four individual padding properties in one step. Value: Multiple instances of <length> | <percentage> Initial value: 0 Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera, Internet Explorer APPENDIX A ■ CSS REFERENCE 331 732XchAppAFINAL.qxd 11/1/06 2:24 PM Page 331 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... Internet Explorer Background Colors, Images, and Similar Properties Backgrounds are controlled using the following properties background A shorthand property for setting all five background properties in one step Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 732XchAppAFINAL.qxd 11/1/06 2:24 PM Page 341 APPENDIX A ■ CSS REFERENCE Value: background-attachment background-color... Lists The following properties can be used to style lists Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 732XchAppAFINAL.qxd 11/1/06 2:24 PM Page 343 APPENDIX A ■ CSS REFERENCE list-style A shorthand property for specifying individual list-style properties in one step Value: list-style-type list-style-position list-style-image Initial value: See individual properties Inherited:... system: Y means the property is supported by the browser, N means it isn’t We’ve split the properties into groups based on usage, following the order and grouping used in Appendix A of Simon Collison’s Beginning CSS Web Development: From Novice to Professional (Apress, 2006), which makes this chart the perfect companion to Simon’s property index Please purchase PDF Split-Merge on www.verypdf.com to remove... PDF Split-Merge on www.verypdf.com to remove this watermark 353 732XCHAppBFINAL.qxd 11/1/06 2:27 PM Page 354 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 732XCHAppCFINAL.qxd 11/1/06 2:34 PM APPENDIX Page 355 C ■■■ Browser Grading Chart T o help you avoid browser support problems and troubleshoot your style sheets, we’ve compiled this simple chart of the majority of CSS. .. elements Supported by: Opera Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 349 732XchAppAFINAL.qxd 11/1/06 2:24 PM Page 350 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 732XCHAppBFINAL.qxd 11/1/06 2:27 PM APPENDIX Page 351 B ■■■ CSS Specificity Chart K nowing how to calculate specificity is key to mastering CSS, so to that end, we’ve created this... elements This is in contrast to borders, which do take up space within the document Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 732XchAppAFINAL.qxd 11/1/06 2:24 PM Page 335 APPENDIX A ■ CSS REFERENCE Value: outline-width outline-style outline-color Initial value: See individual properties Inherited: No Applies to: All elements Supported by: Firefox, Safari, Opera ■ Note Individual... for inline elements Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 732XchAppAFINAL.qxd 11/1/06 2:24 PM Page 339 APPENDIX A ■ CSS REFERENCE position Used to specify the method by which the position of the element’s box is determined Note that the values absolute and fixed imply that the element’s display value must be block The display property is ignored in this case Elements... and troubleshoot your style sheets, we’ve compiled this simple chart of the majority of CSS 2.1 properties, leaving out properties that don’t work properly in any modern browser The browsers listed make up the vast majority in use as of this writing (with the exception of IE 7, which is included now that its CSS support has been declared feature complete), and are as follows: • Firefox (Linux/OS X/Windows,... All elements Supported by: Firefox, Opera Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 732XchAppAFINAL.qxd 11/1/06 2:24 PM Page 347 APPENDIX A ■ CSS REFERENCE cursor Determines the cursor the user agent will display when an element is “moused over.” Value: | auto | default | pointer | text | help | wait | progress | crosshair | move | e-resize | ne-resize | n-resize... border-top-width Y Y Y Y border-width Y Y Y Y Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 732XCHAppCFINAL.qxd 11/1/06 2:34 PM Page 357 APPENDIX C ■ BROWSER GRADING CHART Margin Property Firefox Safari IE 6 IE 7 margin Y Y Y Y margin-bottom Y Y Y Y margin-left Y Y Y Y margin-right Y Y Y Y margin-top Y Y Y Y Property Firefox Safari IE 6 IE 7 padding Y Y Y Y padding-bottom . 325 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CSS Properties The following is a reference to all CS properties. In the. Internet Explorer. CSS Units, Keywords, and Other Property Values CSS includes a fixed set of units and keywords as values for several of its properties. The