(Ebook) The Essential Guide to CSS and HTML Web

Design by Craig Grannell ISBN 9781590599075,

1590599071 download

https://ebooknice.com/product/the-essential-guide-to-css-and-
html-web-design-43141960

Explore and download more ebooks at ebooknice.com

Here are some recommended products that we believe you will be
interested in. You can click the link to download.

(Ebook) The Essential Guide to CSS and HTML Web Design by Craig
Grannell ISBN 9781430204794, 9781590599075, 1590599071, 1430204796

https://ebooknice.com/product/the-essential-guide-to-css-and-html-web-
design-1647780

(Ebook) Learning Web Design: A Beginner’s Guide to HTML, CSS,

JavaScript, and Web Graphics by Jennifer Niederst Robbins ISBN
9789352137381, 9352137388

https://ebooknice.com/product/learning-web-design-a-beginners-guide-
to-html-css-javascript-and-web-graphics-34861334

(Ebook) Learning Web Design - A Beginner's Guide to HTML, CSS,

JavaScript, and Web Graphics by Jennifer Niederst Robbins ISBN
9781449319274, 1449319270

https://ebooknice.com/product/learning-web-design-a-beginner-s-guide-
to-html-css-javascript-and-web-graphics-2608990

(Ebook) Web Design Playground: HTML & CSS The Interactive Way by Paul
McFedries ISBN 9781617294402, 1617294403

https://ebooknice.com/product/web-design-playground-html-css-the-
interactive-way-34633764
(Ebook) Web Design Playground: HTML + CSS the Interactive Way, Second
Edition by McFedries, Paul ISBN 9781633438323, 1633438325

https://ebooknice.com/product/web-design-playground-html-css-the-
interactive-way-second-edition-55669356

(Ebook) Beginning HTML with CSS and XHTML: Modern Guide and Reference
by David Schultz, Craig Cook ISBN 9781590597477, 1590597478

https://ebooknice.com/product/beginning-html-with-css-and-xhtml-
modern-guide-and-reference-982208

(Ebook) Master Web Design with HTML, CSS, JavaScript, and jQuery:
Create Stunning Interactive Websites by Hussain, Frahaan & Hussain,
Kameron ISBN B0CLJ15GD3

https://ebooknice.com/product/master-web-design-with-html-css-
javascript-and-jquery-create-stunning-interactive-websites-55101262

(Ebook) Learning Web Design - A Beginner’s Guide to (X)HTML, Style

Sheets, and Web Graphics by Jennifer Niederst Robbins ISBN
9780596527525, 0596527527

https://ebooknice.com/product/learning-web-design-a-beginners-guide-
to-x-html-style-sheets-and-web-graphics-981692

(Ebook) Pro CSS and HTML Design Patterns by Michael Bowers ISBN
1590598040

https://ebooknice.com/product/pro-css-and-html-design-patterns-2090020
9071FM.qxd 10/17/07 5:11 PM Page i

The Essential Guide to CSS

and HTML Web Design

Craig Grannell
9071FM.qxd 10/17/07 5:11 PM Page ii

The Essential Guide to CSS and

HTML Web Design
Copyright © 2007 by Craig Grannell
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording, or by any information storage or retrieval
system, without the prior written permission of the copyright owner and the publisher.
ISBN-13 (pbk): 978-1-59059-907-5
ISBN-10 (pbk): 1-59059-907-1
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence
of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark
owner, with no intention of infringement of the trademark.
Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor,
New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail [email protected],
or visit www.springeronline.com.
For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600,
Berkeley, CA 94705. Phone 510-549-5930, fax 510-549-5939, e-mail [email protected],
or visit www.apress.com.
The information in this book is distributed on an “as is” basis, without warranty. Although every precaution
has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to
any person or entity with respect to any loss or damage caused or alleged to be caused directly or
indirectly by the information contained in this work.
The source code for this book is freely available to readers at www.friendsofed.com in the
Downloads section.

Credits

Lead Editors Assistant Production Director

Chris Mills, Kari Brooks-Copony
Tom Welsh
Production Editor
Technical Reviewer Ellie Fountain
David Anderson
Compositor
Editorial Board Dina Quan
Steve Anglin, Ewan Buckingham,
Gary Cornell, Jonathan Gennick, Artist
Jason Gilmore, Jonathan Hassell, April Milne
Matthew Moodie, Jeffrey Pepper,
Ben Renow-Clarke, Dominic Shakeshaft, Proofreader
Matt Wade, Tom Welsh Nancy Sixsmith

Project Manager Indexer

Kylie Johnston Julie Grady

Copy Editor Interior and Cover Designer

Damon Larson Kurt Krames

Manufacturing Director
Tom Debolski
9071FM.qxd 10/17/07 5:11 PM Page iii

CONTENTS AT A GLANCE

About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv

About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Acknowledgments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii

Chapter 1: An Introduction to Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Chapter 2: Web Page Essentials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Chapter 3: Working with Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Chapter 4: Working with Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Chapter 5: Using Links and Creating Navigation. . . . . . . . . . . . . . . . . . . . . . . 147
Chapter 6: Tables: How Nature (and the W3C) Intended . . . . . . . . . . . . . . . . . 233
Chapter 7: Page Layouts with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Chapter 8: Getting User Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Chapter 9: Dealing with Browser Quirks . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Chapter 10: Putting Everything Together . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
Appendix A: XHTML Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Appendix B: Web Color Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447
Appendix C: Entities Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451
Appendix D: CSS Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
Appendix E: Browser Guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497
Appendix F: Software Guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509

iii
9071FM.qxd 10/17/07 5:11 PM Page iv
9071FM.qxd 10/17/07 5:11 PM Page v

CONTENTS

About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv

About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii

Chapter 1: An Introduction to Web Design . . . . . . . . . . . . . . . . . . . . . 1

A brief history of the Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Why create a website? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Audience requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Web design overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Why WYSIWYG tools aren’t used in this book . . . . . . . . . . . . . . . . . . . . . . . . 6
Introducing HTML and XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Introducing the concept of HTML tags and elements . . . . . . . . . . . . . . . . . . . 7
Nesting tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Web standards and XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Semantic markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Introducing CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Separating content from design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
The rules of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Types of CSS selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Class selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
ID selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Grouped selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Contextual selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Adding styles to a web page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
The cascade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
The CSS box model explained . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Creating boilerplates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Creating, styling, and restyling a web page. . . . . . . . . . . . . . . . . . . . . . . 20

v
9071FM.qxd 10/17/07 5:11 PM Page vi

CONTENTS

Working with website content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Information architecture and site maps . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Basic web page structure and layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Limitations of web design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Chapter 2: Web Page Essentials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Starting with the essentials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Document defaults . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
DOCTYPE declarations explained . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
XHTML Strict . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
XHTML Transitional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
XHTML Frameset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
HTML DOCTYPEs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Partial DTDs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
What about the XML declaration? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
The head section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Page titles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
meta tags and search engines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Keywords and descriptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
revisit-after, robots, and author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Attaching external documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Attaching external CSS files: The link method . . . . . . . . . . . . . . . . . . . . . 38
Attaching CSS files: The @import method . . . . . . . . . . . . . . . . . . . . . . . 39
Attaching favicons and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Checking paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
The body section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Content margins and padding in CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Zeroing margins and padding on all elements . . . . . . . . . . . . . . . . . . . . . . . 43
Working with CSS shorthand for boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Setting a default font and font color . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Web page backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Web page backgrounds in CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
background-color. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
background-image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
background-repeat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
background-attachment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
background-position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
CSS shorthand for web backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Web page background ideas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Adding a background pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Drop shadows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
A drop shadow that terminates with the content . . . . . . . . . . . . . . . . . . . 51
Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Watermarks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Closing your document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Naming your files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Commenting your work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Web page essentials checklist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

vi
9071FM.qxd 10/17/07 5:11 PM Page vii

CONTENTS

Chapter 3: Working with Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

An introduction to typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Styling text the old-fashioned way (or, why we hate font tags) . . . . . . . . . . . . . . . . 64
A new beginning: Semantic markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Paragraphs and headings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Logical and physical styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Styles for emphasis (bold and italic) . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Deprecated and nonstandard physical styles . . . . . . . . . . . . . . . . . . . . . 67
The big and small elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Teletype, subscript, and superscript . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Logical styles for programming-oriented content . . . . . . . . . . . . . . . . . . 68
Block quotes, quote citations, and definitions . . . . . . . . . . . . . . . . . . . . 68
Acronyms and abbreviations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Elements for inserted and deleted text . . . . . . . . . . . . . . . . . . . . . . . . 69
The importance of well-formed markup . . . . . . . . . . . . . . . . . . . . . . . . . . 70
The importance of end tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Styling text using CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Defining font colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Defining fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Web-safe fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Sans-serif fonts for the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Serif fonts for the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Fonts for headings and monospace type . . . . . . . . . . . . . . . . . . . . . . . 75
Mac vs. Windows: Anti-aliasing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Using images for text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Image-replacement techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Defining font size and line height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Setting text in pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Setting text using keywords and percentages . . . . . . . . . . . . . . . . . . . . . 80
Setting text using percentages and ems . . . . . . . . . . . . . . . . . . . . . . . . 81
Setting line height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Defining font-style, font-weight, and font-variant . . . . . . . . . . . . . . . . . . . . . 83
CSS shorthand for font properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Controlling text element margins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Using text-indent for print-like paragraphs . . . . . . . . . . . . . . . . . . . . . . . . 85
Setting letter-spacing and word-spacing . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Controlling case with text-transform . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Creating alternatives with classes and spans . . . . . . . . . . . . . . . . . . . . . . . . 87
Styling semantic markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Styling semantic markup: A basic example with proportional line heights . . . . . 90
Styling semantic markup: A modern example with sans-serif fonts . . . . . . . . . 92
Styling semantic markup: A traditional example with serif fonts and
a baseline grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Creating drop caps and pull quotes using CSS . . . . . . . . . . . . . . . . . . . . . . . 98
Creating a drop cap using a CSS pseudo-element . . . . . . . . . . . . . . . . . . . 98
Creating a drop cap with span elements and CSS . . . . . . . . . . . . . . . . . . 100
Creating pull quotes in CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Using classes and CSS overrides to create an alternate pull quote . . . . . . . . . 105
Adding reference citations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

vii
9071FM.qxd 10/17/07 5:11 PM Page viii

CONTENTS

Working with lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Unordered lists. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Ordered lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Definition lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Nesting lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Styling lists with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
list-style-image property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Dealing with font-size inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
list-style-position property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
list-style-type property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
List style shorthand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
List margins and padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Inline lists for navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Thinking creatively with lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Creating better-looking lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Displaying blocks of code online . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Chapter 4: Working with Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Color theory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Color wheels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Additive and subtractive color systems . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Creating a color scheme using a color wheel . . . . . . . . . . . . . . . . . . . . . . . 121
Working with hex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Web-safe colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Choosing formats for images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
GIF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
GIF89: The transparent GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Other image formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Common web image gaffes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Using graphics for body copy. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Not working from original images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Overwriting original documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Busy backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Lack of contrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Using the wrong image format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Resizing in HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Not balancing quality and file size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Text overlays and splitting images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Stealing images and designs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Working with images in XHTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Using alt text for accessibility benefits. . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Descriptive alt text for link-based images . . . . . . . . . . . . . . . . . . . . . . . . . 134
Null alt attributes for interface images . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Using alt and title text for tooltips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

viii
9071FM.qxd 10/17/07 5:11 PM Page ix

CONTENTS

Using CSS when working with images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

Applying CSS borders to images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Using CSS to wrap text around images . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Displaying random images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Creating a JavaScript-based image randomizer . . . . . . . . . . . . . . . . . . . . 140
Creating a PHP-based image randomizer . . . . . . . . . . . . . . . . . . . . . . . 142

Chapter 5: Using Links and Creating Navigation . . . . . . . . . . . . . . . . 147

Introduction to web navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Navigation types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Inline navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Site navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Search-based navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Creating and styling web page links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Absolute links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Relative links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Root-relative links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Internal page links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Backward compatibility with fragment identifiers . . . . . . . . . . . . . . . . . . . . 153
Top-of-page links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Link states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Defining link states with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Correctly ordering link states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
The difference between a and a:link . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Editing link styles using CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
The :focus pseudo-class. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Multiple link states: The cascade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Styling multiple link states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Enhanced link accessibility and usability. . . . . . . . . . . . . . . . . . . . . . . . . . 162
The title attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Using accesskey and tabindex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Skip navigation links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Creating a skip navigation link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Styling a skip navigation link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Enhancing skip navigation with a background image . . . . . . . . . . . . . . . . 168
Link targeting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Links and images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Adding pop-ups to images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Adding a pop-up to an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Image maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Faking images maps using CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Using CSS to create a fake image map with rollovers . . . . . . . . . . . . . . . . 178
Enhancing links with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Creating a pop-up window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Creating an online gallery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Switching images using JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Adding captions to your image gallery . . . . . . . . . . . . . . . . . . . . . . . . 187
Automated gallery scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188

ix
9071FM.qxd 10/17/07 5:11 PM Page x

CONTENTS

Collapsible page content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

Setting up a collapsible div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Enhancing accessibility for collapsible content . . . . . . . . . . . . . . . . . . . . 191
Modularizing the collapsible content script. . . . . . . . . . . . . . . . . . . . . . 192
How to find targets for collapsible content scripts . . . . . . . . . . . . . . . . . 194
Creating navigation bars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Using lists for navigation bars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Using HTML lists and CSS to create a button-like vertical navigation bar . . . . . 196
Creating a vertical navigation bar with collapsible sections . . . . . . . . . . . . . 200
Working with inline lists. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Creating breadcrumb navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Creating a simple horizontal navigation bar . . . . . . . . . . . . . . . . . . . . . 204
Creating a CSS-only tab bar that automates the active page . . . . . . . . . . . . 207
Graphical navigation with rollover effects . . . . . . . . . . . . . . . . . . . . . . . . . 211
Using CSS backgrounds to create a navigation bar . . . . . . . . . . . . . . . . . 211
Using a grid image for multiple link styles and colors . . . . . . . . . . . . . . . . 214
Creating graphical tabs that expand with resized text . . . . . . . . . . . . . . . . 217
Creating a two-tier navigation menu . . . . . . . . . . . . . . . . . . . . . . . . . 220
Creating a drop-down menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Creating a multicolumn drop-down menu . . . . . . . . . . . . . . . . . . . . . . 226
The dos and don’ts of web navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230

Chapter 6: Tables: How Nature (and the W3C) Intended . . . . . . . . . . 233

The great table debate. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
How tables work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Adding a border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Cell spacing and cell padding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Spanning rows and cells. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Setting dimensions and alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Vertical alignment of table cell content. . . . . . . . . . . . . . . . . . . . . . . . 238
Creating accessible tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Captions and summaries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Using table headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Row groups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Scope and headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Building a table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Building the table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Styling a table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Adding borders to tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Styling the playlist table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Adding separator stripes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Applying separator stripes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Adding separator stripes with PHP. . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Tables for layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

x
9071FM.qxd 10/17/07 5:11 PM Page xi

CONTENTS

Chapter 7: Page Layouts with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

Layout for the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Grids and boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Working with columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Fixed vs. liquid design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Layout technology: Tables vs. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Logical element placement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Workflow for CSS layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Anatomy of a layout: Tables vs. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Creating a page structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Box formatting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
CSS layouts: A single box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Creating a fixed-width wrapper . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Adding padding, margins, and backgrounds to a layout. . . . . . . . . . . . . . . 265
Creating a maximum-width layout. . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Using absolute positioning to center a box onscreen . . . . . . . . . . . . . . . . 269
Nesting boxes: Boxouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
The float property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Creating a boxout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Advanced layouts with multiple boxes and columns . . . . . . . . . . . . . . . . . . . . . 278
Working with two structural divs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Manipulating two structural divs for fixed-width layouts . . . . . . . . . . . . . . 278
Manipulating two structural divs for liquid layouts . . . . . . . . . . . . . . . . . 285
Placing columns within wrappers and clearing floated content . . . . . . . . . . . . . 288
Placing columns within a wrapper . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Clearing floated content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Working with sidebars and multiple boxouts . . . . . . . . . . . . . . . . . . . . . . . 293
Creating a sidebar with faux-column backgrounds . . . . . . . . . . . . . . . . . 294
Boxouts revisited: Creating multiple boxouts within a sidebar . . . . . . . . . . . 296
Creating flanking sidebars. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
Creating flanking sidebars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Automating layout variations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Using body class values and CSS to automate page layouts. . . . . . . . . . . . . 304
Scrollable content areas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
Working with frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Working with internal frames (iframes) . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Scrollable content areas with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

Chapter 8: Getting User Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . 313

Introducing user feedback. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Using mailto: URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Scrambling addresses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Working with forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Creating a form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
Adding controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
Improving form accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
The label, fieldset, and legend elements . . . . . . . . . . . . . . . . . . . . . . . 318
Adding tabindex attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319

xi
9071FM.qxd 10/17/07 5:11 PM Page xii

CONTENTS

CSS styling and layout for forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320

Adding styles to forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Advanced form layout with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Sending feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Configuring nms FormMail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Multiple recipients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Script server permissions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Sending form data using PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Using e-mail to send form data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
A layout for contact pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
Using microformats to enhance contact information. . . . . . . . . . . . . . . . . . . . . 336
Using microformats to enhance contact details . . . . . . . . . . . . . . . . . . . 337
Online microformat contacts resources . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Contact details structure redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342

Chapter 9: Dealing with Browser Quirks . . . . . . . . . . . . . . . . . . . . . . 347

The final test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Weeding out common errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
A browser test suite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Installing multiple versions of browsers . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Dealing with Internet Explorer bugs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
Outdated methods for hacking CSS documents . . . . . . . . . . . . . . . . . . . . . 355
Conditional comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Dealing with rounding errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Alt text overriding title text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Common fixes for Internet Explorer 5.x . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Box model fixes (5.x) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Centering layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
The text-transform bug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
Font-size inheritance in tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
Common fixes for Internet Explorer 6 and 5 . . . . . . . . . . . . . . . . . . . . . . . 361
Fixing min-width and max-width. . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
Double-float margin bug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
Expanding boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
The 3-pixel text jog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Whitespace bugs in styled lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Problems with iframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Ignoring the abbr element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
PNG replacement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Problems with CSS hover menus (drop-downs) . . . . . . . . . . . . . . . . . . . 365
Fixing hasLayout problems (the peekaboo bug) . . . . . . . . . . . . . . . . . . . . . 365
Targeting other browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367

xii
9071FM.qxd 10/17/07 5:11 PM Page xiii

CONTENTS

Chapter 10: Putting Everything Together . . . . . . . . . . . . . . . . . . . . . 371

Putting the pieces together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
Managing style sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
Creating a portfolio layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
About the design and required images . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Putting the gallery together. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Styling the gallery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Hacking for Internet Explorer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
Creating an online storefront . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
About the design and required images . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Putting the storefront together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Styling the storefront . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381
Fonts and fixes for the storefront layout . . . . . . . . . . . . . . . . . . . . . . . . . 384
Creating a business website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
About the design and required images . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Putting the business site together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Styling the business website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
Working with style sheets for print . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392

Appendix A: XHTML Reference. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399

Standard attributes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Core attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Keyboard attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Language attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401
Event attributes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401
Core events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401
Form element events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402
Window events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
XHTML elements and attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403

Appendix B: Web Color Reference . . . . . . . . . . . . . . . . . . . . . . . . . . 447

Color values. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448
Web-safe colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448
Color names . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449

Appendix C: Entities Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451

Characters used in XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452
Punctuation characters and symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452
Quotation marks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452
Spacing and nonprinting characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453
Punctuation characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454
Symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454
Characters for European languages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455
Currency signs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460

xiii
9071FM.qxd 10/17/07 5:11 PM Page xiv

CONTENTS

Mathematical, technical, and Greek characters . . . . . . . . . . . . . . . . . . . . . . . . 460

Common mathematical characters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460
Advanced mathematical and technical characters . . . . . . . . . . . . . . . . . . . . 461
Greek characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Arrows, lozenge, and card suits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466
Converting the nonstandard Microsoft set . . . . . . . . . . . . . . . . . . . . . . . . . . 466

Appendix D: CSS Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471

The CSS box model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472
Common CSS values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
CSS properties and values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474
Basic selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
Pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491
Pseudo-elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491
CSS boilerplates and management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492
Modular style sheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494

Appendix E: Browser Guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497

Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498
Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498
Opera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499
Safari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500
Other browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500

Appendix F: Software Guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503

Web design software. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504
Graphic design software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505
The author’s toolbox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509

xiv
9071FM.qxd 10/17/07 5:11 PM Page xv

ABOUT THE AUTHOR

Craig Grannell is a well-known web designer and writer

who’s been flying the flag for web standards for a number
of years. Originally trained in the fine arts, the mid-1990s
saw Craig become immersed in the world of digital media,
his creative projects encompassing everything from video
and installation-based audio work, to strange live perform-
ances—sometimes with the aid of a computer, televisions,
videos, and a PA system, and sometimes with a small bag
of water above his head. His creative, playful art, which
usually contained a dark, satirical edge, struck a chord with
those who saw it, leading to successful appearances at a
number of leading European media arts festivals.

Craig soon realized he’d actually have to make a proper living, however. Luckily, the Web
caught his attention, initially as a means to promote his art via an online portfolio, but then
as a creative medium in itself, and he’s been working with it ever since. It was during this time
that he founded Snub Communications (www.snubcommunications.com), a design and writ-
ing agency whose clients have since included the likes of Rebellion Developments (publish-
ers of 2000 AD), IDG UK (publishers of Macworld, PC Advisor, Digital Arts, and other
magazines), and Swim Records.

Along with writing the book you’re holding right now, Craig has authored Web Designer’s
Reference (friends of ED, 2005) and various books on Dreamweaver, including Foundation
Web Design with Dreamweaver 8 (friends of ED, 2006). Elsewhere, he’s written numerous
articles for Computer Arts, MacFormat, .net/Practical Web Design, 4Talent, MacUser, the
dearly departed Cre@te Online, and many other publications besides.

When not designing websites, Craig can usually be found hard at work in his quest for global
superstardom by way of his eclectic audio project, the delights of which you can sample at
www.projectnoise.co.uk.

xv
9071FM.qxd 10/17/07 5:11 PM Page xvi
9071FM.qxd 10/17/07 5:11 PM Page xvii

ABOUT THE TECHNICAL REVIEWER

David Anderson is a biochemistry graduate from North West

England who first noticed the value of the Internet in the early
1990s while using it as a research tool to aid his academic studies.
He created his first website shortly after graduating in 1997, and
began to establish himself as a freelance developer while also
working in a variety of roles for several major UK companies until
eventually founding his own business, S2R Creations, in 2003.

David discovered the web standards movement early in his

career, and quickly adapted his working practices to utilize the
power and versatility of CSS and semantic HTML. Clients benefiting from his skills have
included New Directions Recruitment and Rex Judd Ltd. He has been sharing his knowledge
with members of various web development forums for over five years, has written for
Practical Web Design magazine, and has established his reputation as an authority on web
standards as a result.

When he isn’t developing websites, he can be found taking photos of anything that will stay
still long enough, as well as a few things that won’t. He shares his photos on Flickr, at
www.flickr.com/photos/ap4a, and also writes on his blog at www.ap4a.co.uk.

xvii
9071FM.qxd 10/17/07 5:11 PM Page xviii
9071FM.qxd 10/17/07 5:11 PM Page xix

ACKNOWLEDGMENTS

Writing a book is a long process, involving many hours of effort. To see the final product is
exhilarating and extremely satisfying, but it couldn’t have happened without those who’ve
supported me along the way. In particular, I’d like to thank David Anderson, whose excellent
editing, reviewing, ideas, and suggestions were indispensable in the revision of the text.
Special thanks also to Chris Mills for getting the ball rolling, to Tom Welsh for picking up the
baton, and to Kylie Johnston for keeping everything ticking over. Thanks also to the other
members of the friends of ED team for their hard work in getting this publication into the
world.

I’m also extremely fortunate to have had the support of several other great designers. I par-
ticularly owe a debt of gratitude to Sarah Gay (www.stuffbysarah.net) for her highly useful,
selfless contributions, and to my former partner in crime David Powers, who once again
stepped in to assist with a couple of elements in the book. Thanks also to Jon Hicks, Matthew
Pennell, and Lokesh Dhakar for granting permission to include elements of their work, and to
the many designers whose work has been an inspiration over the years.

And, finally, thanks to Kay for once again being there for me and putting up with me while I
wrote this book.

xix
9071FM.qxd 10/17/07 5:11 PM Page xx
Exploring the Variety of Random
Documents with Different Content
 “I ’bject.”
The court said that I could not do the pleadin, as I was not a party
to the case, nor had I a license to practice before the court.
I riz up agin.
“Mistur Judge,” says I, “what difference does it make who I am or
what I am, so long as I treat the court with respect, and know as
much, or nearly as much, about this case as any lawyer we could
hire?
“If the case, Mistur Judge, is to be decided on the law and
evidence, and not on the pleadin, why cant I do what pleadin we
need, as well as some lawyer?”
I sot down.
The judge looked at me a minit over his specks.
“Well, Mrs. Gaskins,” says he, “if we allowed anybody and
everybody to come into our courts and represent a neighbor or
friend, half our lawyers would have nothin to do. The law prohibiting
this privilege is made so as to afford our attorneys a livelihood.
While it sometimes proves a hardship to litigants, it would be a
greater hardship on our lawyers if they dident have sich a law in
their favor. However, Mrs. Gaskins, as this is a case of small
importance, if the bar is willing I will permit you to say what you
desire in behalf of the defendant.”
Turnin to the lot of high-toned cattle over the fence from us, says
he: “What do you say, gentlemen?”
They kind a hemmed and hawed and whispered together, and
looked disgusted and disappinted and contemptible, and finally one
of them says:
“We shant ’bject.”
And four or five of em got up and left, lookin like as if they had
lost somethin.
Well, the judge invited us over into the field.
We went in, and I sot down by a table. The lawyer for Mr. Richer
got up and stated his case. He said that he would prove that a
number of years ago one Jobe Gaskins purchased from the
Honorable D. M. J. Richer certain lands and tenements to the value
of $3,800; that there has been but $1,700 paid on the amount; that
 there remains due and unpaid
some $2,100, which is secured by
mortgage. And he was there to
pray for the foreclosure of said
mortgage and sale of the premises
to satisfy said claim.
He sot down.
I got up.
I says, says I: “Mistur Judge, this
here case haint just exactly like
that there lawyer said. We claim
“‘I ’bject.’” there haint no $2,100 still due Mr.
Richer, although he has our notes
and a mortgage for that amount.
We claim that he has got nearly full value for all we got from him.
We have paid him $1,700 of the principal and over $2,200 in
interest. The land, for some cause, haint worth now as much as we
paid for it, and we expect to prove that Jobe haint done anything to
cause the land to fall in value. The land may now be worth $2,500, if
we could find some one that had the money and wanted to buy
land. If we are foreclosed and forced to sell it, it may not bring more
than the $2,100 that he claims we owe him.
“Now, we want to be fair with Congressman Richer, Mistur Judge,
and all we ask is that Mr. Richer and his likes what lends money be
treated by the law and the courts the same as Jobe and his likes
what owes money is treated.
“Now, as I said before, Mistur Judge, the farm is the same size as
it was the day we bought it; the land is jist as good; the
improvements are better. We have paid Mr. Richer his interest every
year for sixteen years, and $1,700 besides.
“Now, Mistur Judge, wouldent it be fair for Mr. Richer to take the
farm back and give us our $1,700? He would have jist what he had
before we bought it, and he would have $2,212 interest money for
the use of it, and we would have the $1,700 we have paid him over
and above the interest.
 “Or, if he dont want to do that, Mistur Judge, we will value the
farm at $2,500, which is all or more than its worth to-day, and will
pay him the difference between the $1,700 we already have paid
and the $2,500, or $800, in cash.
“Now, Mistur Judge, this would be honest and fair, and he can
take his choice, while if you foreclose us, and the farm at sheriff sale
only brings $2,100, and Mr. Richer buys it in, he will have the farm
he had at fust, our $1,700 principal and the $2,212 interest money
we have paid him, or he will have the farm and $3,912 in money,
and we in our old age will have nothin.”
When I was through the other lawyer got up and said sich
argament was all bosh and contrary to law; that the court had too
good sense to be governed by sich anachristic talk from a rattle-
brained woman. At that, it bein noon, the court dismissed for dinner,
without explainin why this was “a case of small importance.” It looks
to me that its a purty tolerable important case to Jobe and me.
 CHAPTER XII.
THE DECISION.

T HAT day, when the judge and lawyers got back from dinner, and
arter Jobe and me had eat our lunch in the jury-room, they
opened court agin, and the judge, lookin at me tired like, says:
“Mrs. Gaskins, the court is now ready to proceed with the case.”
“So be we, Mistur Judge,” says I.
So Congressman Richer’s lawyer got out a lot of papers and notes,
and, showin them to Jobe and me, asked us if we admitted signin of
them.
“Certainly we do,” says I.
So he handed them to the judge, sayin that that was all the
evidence he desired to produce, and as the notes had not been paid,
as stipulated in the mortgage, he asked to have the mortgage
foreclosed and the property sold, and judgment for costs rendered
agin the defendant.
At that he sot down.
Jobe he looked distressed.
I felt kind a gone like.
But when the judge said that if we had any evidence to produce
or objection to make why the mortgage should not be foreclosed,
now was my time to make it, I jist gathered up courage and says,
says I:
“Mistur Judge, we have some evidence to offer, and I want to say
a few words.
“We never denied that we signed that mortgage and them notes;
we never claimed we had paid all we did sign.
 “‘I want to prove to you, Mistur Judge.’”

“Now, what I want to prove, Mistur Judge, is, that the reason we
haint paid more of the notes was because times have been so hard,
prices so low and money so scarce that we jist couldent pay any
more than we have paid.
“I want to prove that we have paid every dollar we could pay, and
that we have went naked and hungry, or nearly so, to pay what we
have paid.
“I want to prove, Mistur Judge, that when we bought this farm,
some sixteen years ago, times were better than now; that farmers
could sell what they raised for more than now; and I want to prove
that it has not been by any act of the farmers that times have been
made harder and prices lower than then.
“I want to prove, Mistur Judge, that taxes haint got any less; that
interest is jist as high as then; that it takes twice as many bushels of
wheat for Jobe to pay his share of your wages, and the wages of the
other officers in this buildin, as it did then. I want to prove that Jobe
had to use wheat to pay you fellers that he could have used toward
payin on them notes if prices had staid up or officers’ pay had been
brought down.
 “I want to show you that all you officeholders have helped to bring
about this condition by your endorsin of men that made laws to
destroy the greenback, to demonitize silver, encouragin high interest
and money monopoly, and by your increasin of wages of
officeholders or lettin them remain the same as they were when
wheat was high.
“I want to prove, Mistur Judge, that Mr. Richer was one of the law-
makers, that he voted agin silver, and did not try to do anything or
to make any law to make money as plenty as it use to be.
“I want to show that Mr. Richer already has got all we have raised
by our hard work for the last sixteen years, and, Mistur Judge, I
think that instid of you sellin our farm to satisfy him, you ort to order
him to give us back all the money we have paid him, except the
interest, and let us give him back the property we got from him; we
are willin to do this, and give him our improvements besides, if he
will give us back our $1,700. This is all we ask, Mistur Judge.
“If you grant it we would have a few dollars to keep us in our old
age, and Mr. Richer would have all we got from him and $2,212
interest money besides.
“If you foreclose us, as this high-toned lawyer asks you to do, we
will have nothing left, and Mr. Richer will have as much as he had
before and $3,912 of our hard-earned money besides, part of it,
Mistur Judge, bein money I got from home when father died.”
The judge kind a looked at me pityin like, and says, says he:
“Mrs. Gaskins, your argament may be all right from your point of
view; but it is not law, Mrs. Gaskins. It is not law. We must proceed
according to law.”
“What is law?” says I. “Haint it justice?” pleadin like.
The judge studied a minit, cleared his throat a time or two, and
then says he:
“It is supposed to be, Mrs. Gaskins. It is supposed to be. It should
be justice; it should be. I appreciate the position of you two old
people. I believe, as you say, that you have worked hard and saved
that you might get your farm paid for and have a home in your old
age. I believe you have done all you could do. Your argament has
been well made.
 “‘This is the law, whether it is justice or not.’”

“But the law—the law, Mrs. Gaskins, says that if these notes have
not been paid according to the provision of the mortgage, it can be
foreclosed.
“Even if you had paid all of the notes but one dollar, and had
worked fifty years to pay them, and for some reason money had
become scarce, and your farm under forced sale would not bring
more than the one dollar, it would have to be sold, under the law, to
satisfy that one dollar still due on it.
“To make it plainer to you, Mrs. Gaskins, suppose that all the
money was demonitized or destroyed except gold or silver (no
matter which), and suppose that one man had succeeded in getting
possession of all the money, and you owed one dollar on a farm that
had cost you $3,800, you would have to get that one dollar from the
man who had it, and he could place his own estimate of value on it,
and could, if he so desired, demand 120 acres of good farm land for
one of his dollars, and, in case of forced sale under the law, all the
property you have would have to be sacrificed to satisfy that one
dollar. It would have to be done, even though that one man who had
all the money cornered owned your mortgage and had made the
law, or got it made, that destroyed all the other money. So this, Mrs.
Gaskins, is the law, whether it is justice or not, and I, as the judge
of this court, must be governed by the law as it is. All the testimony
you have mentioned is not such as could be admitted before this
court. Hence I shall render judgment as prayed for by the plaintiff,
with costs of this action attached.”

“Jobe and me sot there dazed like.”

I wanted to say some more, but the judge told me the case was
over, and that I need not say any more.
So Jobe and me sot there dazed like for a little while. Then the
sheriff come to us and said the case was over and we had better go
home. We got up and come home.
We have been over the dear old farm half a dozen times, so as to
carry its memory in our minds to wherever we shall go. Oh! how
queer I feel when I wonder where that will be.
Jobe is jist a mopin around with no life in him at all.
I haint heerd him holler for McKinley since we got back from
court.
 I wonder if Mr. McKinley, and Mark Hanna, and Henry Flagler, of
the Standard Oil Trust, and Mr. Kohlsaat, and them other millionairs
what has been down in Georgia schemin and plannin and arrangin to
git Mr. McKinley elected to the president’s office, want to git him
elected so as to make it easier for Jobe and his likes to pay for their
homes.
I wonder if the laws they are wantin to git made, or keep from
bein made, is to make themselves richer or to make the life of the
fellers who vote the ticket they fix up easier.
Them millionair fellers seem to take a great interest in elections
and things.
 CHAPTER XIII.
JOBE CHEERS UP.

J OBE’S aunt Jane out in Indyana is dead. The poor, dear soul
worked hard all her life, and now she is dead. She had been takin
care of a rich inverlid for some twelve years, and got two dollars a
week for all that time. By livin plain and not goin anywhere for all
that time, she has saved $563, and she has left all her savins to
Jobe, her only kin, the lawyers out there write us.
We got a letter from them last week
sayin she had died of a suddent, and left
Jobe all she had, arter payin her buryin
expenses.
Jobe has been more like hisself, ever
since he heerd she was dead, than he has
been for some time.
He now says that if he lives to vote for
McKinley it will be the happiest moment of
his life. I hope Jobe will live.
As soon as he got that letter he started
out agin to try to borrow enough money to
pay off Mr. Richer’s mortgage before
Aunt Jane. foreclosin day. He found one banker at
Canal Dover who said he would let him
have $1,800 at seven per cent. interest, jist
to commodate Jobe. Jobe is a goin to take it, which, with what he is
to git as his dead aunt’s heir, will make the money Congressman
Richer is wantin so bad, and a little besides.
 Jobe went to town yisterday to try to stop the foreclosin bizness
until our legicy money comes and we can git the other from the
bank at Canal Dover.

“He would call him ‘Billy,’ in honor of the next president.”

They told him down to the court-house that they would try to
“stave it off.”
Jobe said that when the report got out that he was about to git a
legicy everybody wanted to shake hands with him and be friendly
like.
Even them canderdate fellers, what acted kind a cold durin our
foreclosin trial, come around smilin, Jobe said, and shook hands, and
said that “they knode it would come around all right,” that “a man
never loses anything by votin the strait ticket.” They told Jobe to
“cheer up and git ready for the next election,” and all sich stuff. Jobe
he come home declarin that the Republican party was the “grand old
party” of the universe, he was so puffed up like.
Last night I actually heerd him whistlin one of them campaign
tunes, while he was a feedin of the calf. When the calf got all the
milk out of the bucket and looked up at Jobe lovin like, Jobe patted
him on the head and told him he was a nice feller and looked so
knowin, like McKinley, that he would call him “Billy,” in honor of the
next president.
Jobe then started to the house a whistlin agin, when William came
at him stiff-legged, and struck Jobe on them election patches I put
on his pants, and knocked Jobe down on his hands and knees, and
before Jobe could git up, William hit him agin, knockin him clear
down. Jobe turned over on his back and begin to strike at McKinley
with the bucket, sayin, “You dum rascal,” or somethin like that. He
then clamered to his feet and took arter the calf, kickin as hard as he
could kick. The second kick he missed the calf and fell. Then I
hollered at him.

“Before Jobe could git up William hit him agin.”

 He got up, put his hand on his hip and limped to the house. When
he come in says he:
“Ile kill that dum calf if he ever acts that way agin. He like to a
broke my hip.”
“Why, Jobe,” says I, “dident I jist hear you namin him for the
leadinest Republican of the State? Dont you know he was jist a givin
you a practical lesson in polerticks? Dont be mad, Jobe,” says I,
“youle be a lovin him tomorrow with all your heart.”
At that Jobe went into the room to git the bottle of salvation oil,
mutterin somethin as he went about me not havin any sense.
Now, isent it a fact that the polerticians and officeholders have
been actin like that bull calf toward Jobe and his likes for years?
Haint they been lookin into the face of the taxpayers pleasin like
jist before every election? Haint they been buttin the life out of the
people that feed them by increasin salaries, and makin taxes higher,
and sellin out to rich trusts and sich, ever since the war?
Haint they made law on law agin the poor and for the rich?
Haint they issued bonds on top of bonds, to the rich people and
on the poor?
Haint they raised salary arter salary of officeholders when the
people never asked it?
Haint they brought us to a gold basis and made it hard for people
to pay interest and mortgages?
Haint they made it easy for the money-lender to foreclose agin the
borrower?
Haint they destroyed millions and millions of the people’s
greenback money?
Haint they demonitized silver?
Haint they done everything agin the people and nothin for them?
And what has the people to show for all the money they have
destroyed, and salaries they have increased, and mortgages they
have foreclosed, and bad laws they have made, but hard times and
debts, and people without homes, and cheap wheat, and low wages,
and high interest, and big taxes, and foreclosin, and beggin, and the
Lord only knows what all?
 Yet Jobe and his likes will vote the strait ticket, and I suppose will
keep a votin it until the bull calf knocks their brains out.
What has Jobe and his likes got to show for all the votin they have
voted? What, I say!
If we can save our farm, and if we raise enough to pay the
interest and taxes this year, and a little besides, I am a goin to git
me a pair of them bloomers and go to workin and votin for more
good laws and less polerticks; and the fust polertician that comes
around our house talkin “party success” and “party principles” Ile
kick clear into the middle of the big road—Ile do it if I split them
bloomers from waistband to waistband in doin so.
 CHAPTER XIV.
A NEW MORTGAGE.

W E was that bizzy last week, with gittin our legicy and payin of
costs, and a borrowin of money, and a writin of papers, and a
signin of our names, and a swearin to this, that and the other thing,
that I dident git my bakin done, let alone do any writin.
The fust of last week we got our share of our legicy; the officers in
Indyana got the balance.
Howsomever, what we did git come handy for a while anyhow.
I dont know what we would have done if Jobe’s poor, dear dead
aunt hadent a died jist when she did.
Well, when what was left us, arter payin them Indyana fellers,
come, Jobe and me hitched up old Tom and struck out for town to
stop the foreclosin bizness.
We fust went to the bank at Canal Dover, and made arrangements
to borrow $1,800 at seven per cent. Jobe he hung for six per cent.,
but when the banker explained to Jobe that we was now on a gold
basis; that McKinley had come out for a strait gold basis platform;
that he could lend all the money he could git at seven per cent. or
more, and that all the leadin financiers and bankers, in fact all the
leadin citizens, were in for a gold basis, Jobe he “saw it” and agreed
to seven.
Comin home Jobe told me he would ruther pay seven per cent.
than six, in order to support a “sound money basis;” that “nobody
believed in small interest but them crazy Populists and their likes.”
 “He would rather pay seven per cent. than six, in order
to support a sound money basis.”

Well, arter we arranged for the money we went to the court-

house, and from the time we got there till I got out I heerd nothin
but “costs,” “costs,” “costs.” They had it all charged to Jobe. Not one
cent was charged to Mr. Richer. There was the clerk’s costs, and the
sheriff’s costs, and the auditor’s costs, and the judge’s costs, and
supeena costs, and writ costs, and mileage costs, and the Lord only
knows what all or who all had costs charged up agin Jobe. The very
fellers Jobe had helped to elect had jist as big bills charged up as the
law would allow, and some bigger, and nary one of them was willin
to knock off a cent. We had to pay it or be foreclosed, and we had
to take our legicy money to pay it with—the money that poor, dear,
dead Aunt Jane had worked so hard to save.
Well, when we got the costs all paid, we then begin to draw up
papers, and sign and acknowledge, and read and reread of papers,
to git the money from the Canal Dover banker.
One feller told Jobe and the other fellers to go out of the room till
he examined me seperate and apart, at which I became insulted and
up and says, says I:
“No, you wont, sir; no man will examine me seperate and apart or
any other way in the absence of Jobe Gaskins.”
 “The law requires it,”
says he.
“Law or no law,” says
I, “Ile not submit. I have
submitted to law instid of
justice; Ive submitted to
law instid of right; Ive
submitted to law instid of
humanity, but when it
comes to submittin to
law instid of decency,
Betsy Gaskins demurs.”
But arter they
explained that he jist
wanted to read and
explain the mortgage to
me, I even submitted to
law agin. “‘Law or no law,’ says I.”
When they was all out,
the feller read the
mortgage to me, and asked me if the signin of it was my “free act
and deed.” I told him it was so fur as I had to sign it to keep from
bein foreclosed, but that I would not sign it as it then read.
“Whats wrong?” says he.
“The wrong,” says I, “is where it says that Jobe shall pay the
‘principal and interest in gold.’”
I explained to him that Jobe and me hadent had ten dollars in
gold for years and years.
But he said it was only a form; that we was now on a gold basis,
and the bank requires all their mortgages to read, “payable, principal
and interest, in gold,” since we have come to a gold basis.
But I wouldent sign it, and the feller called Jobe and the other
fellers in. Jobe he got mad at me and scolded and fretted around
until I got ashamed of him, and I jist up and says, says I:
“Ile sign it, Mr. Gaskins, but you will find that payin seven per
cent. interest and payin it in gold to keep your party in power is up-
hill bizness.”

“‘Payin it in gold to keep your party in

power is up-hill bizness.’”

So I signed it. But the Lord only knows where we will git the gold
to pay even the interest with. We have to pay the interest every six
months.
Ive lived on this farm for nigh onto seventeen years, and have
never found a piece of gold as big as a pin-head. Maybe Jobe knows
where it is. I dont, goodness knows.
Well, arter the signin was done there was some more charges and
sich to pay for, and Jobe had it to pay. Then, arter requestin Jobe to
look arter his party’s interests in our township, they bid us good-by,
and Jobe and me come home.
 CHAPTER XV.
JOBE, OUT OF TROUBLE, IS UNRULY AGAIN.

J OBE he is jist as contrary and stiff-necked as he ever was. He acts

as though he had never went through what he has went through
since last Noo Years. He is beginnin agin to act towards me as if I
was his inferior; as though it wasent me who stuck up for him and
fought his battles in time of trouble—yes, stood by him when all
creation, office-seekin canderdates and all, had forsook him.
He now says the reason he did not pay off that other mortgage
years ago was because it wasent made “payable in gold;” he says he
believes in payin debts in “sound money,” and that he now feels
sorry that he dident git gold and pay what he did pay on it; that he
feels as though he has cheated Mr. Richer by payin him in
greenbacks and silver and sich.
He says that he would ruther pay seven per cent. interest in gold
than six per cent. interest in paper money or silver.
Then he gits up and swells out his boozum, and says:
“John Sherman is the greatest financier on airth. He has brought
us to a gold basis quicker than any other livin man could a done it.
He has taught old Cleveland all he knows about sound money.” And
so forth and so forth.
He goes on in this way day in and day out until I am sick and tired
of it. He even wants me to come out and be a Republican, when he
knows I have been a Dimicrat for nigh onto thirty-five years.
When he is tellin the neighbors about how much better it is to pay
debts in gold, and about us a givin a “gold mortgage” to the banker,
he always calls it his mortgage and his doins. He never even
mentions my name when speakin of the mortgage, when he knows
as well as I do that both the old parties, as it were, made that gold
mortgage, and that it is “our mortgage” and “our doins” that made
it.
But that is the way with Jobe. As long as everything is goin along
without trouble he wants all the glory; but as soon as trouble arises
he tries to blame me for gittin him in it, and calls on me for help.
Now, as Betsy Gaskins, I am ashamed of that gold mortgage, and
if I could have had my way I never would have signed it. Ide a dide
fust. But as a Dimicrat I must approve it, to be in line with my party,
and I think Jobe is mean that he dont speak of it as “our mortgage”
and “our doins,” when he knows the highest paid Dimicrats in the
land is jist as much in favor of “gold mortgages” as John Sherman or
Mistur McKinley or any high-up Republicans are.
Haint Mistur Carlisle, who is drawin $8,000 a year (for work he ort
a be a doin in the money department at Washington), spendin lots
of time makin speeches for gold mortgages down in Kaintuckey?
Haint Carlisle a Dimicrat?
Dont Mistur Cleveland set up of nites and write letters favorin
“gold mortgages,” and some nites like as not lets Mrs. Cleveland
sleep all by herself?
What more has John Sherman done, or McKinley?
Jobe thinks because McKinley has spent all spring outside of Ohio,
talkin “gold mortgages” and workin to git elected to the best payin
office in the country, that he is intitled to all the credit for bringin
about “gold mortgages.” Now, I dont believe it, though he was so
bizzy at it that he had to have his salary as governor sent to him by
mail for months.
Suppose my dream was true, and instid of us havin to give the
banker a mortgage drawin seven per cent. interest (“interest and
principal payable in gold”), that we, that is, Jobe and me, could have
gone to the county treasurer of Tuscarawas County and a borrowed
the same amount of paper and silver money (the same kind we got
from the bank) at two per cent. interest, payable in any money of
the government. Who would it a hurt?
Wouldent it a been better for Jobe and me? Wouldent we a had
only $36 a year interest to pay to the county instid of $126 in gold to
the bankers? Wouldent we a had more
money to pay toward our home or to buy
store goods with?
If we could spend $90 a year for store
goods that we now have to pay as
interest, wouldent that help the
storekeepers a little?
Which would be the best for the
storekeepers, for Jobe and his likes to
have to pay high interest in gold, or low
interest in any kind of good money?
There is another question I would like
to ask you.
It is this: If the pay of the post-offices is “‘John Sherman is the
big enough to pay a feller to buy them greatest financier on
from Congressmen, and pay big money airth.’”
for them, haint it about time that the pay
of such post-offices was cut down?
Why is a feller’s time what is glad to clear $300 or $400 a year
doin anything else worth $1,500 or $2,000 for keepin the post-
office?
Does it hurt their character so much? And why is it that all them
fellers what sells post-offices, and most of them what buys em, favor
a gold basis and gold mortgages and sich?
Are they afraid they will have to go back to their old jobs and less
pay if they dont holler as the big fellers holler?
 CHAPTER XVI.
JOBE IS SCARED.

J OBE he is in a critical condition. Day before yisterday, when Jake

Stiffler brought our mail out from town—it consisted of the two
noosepapers that we have took for years, that is, the Ohio Dimicrat
and the Tuscarawas Advercate—I played a trick on Jobe that nearly
cost him his life, and nearly made me a weepin and mournin widder.
For years and years we have took them two “stanch and
substantial” noosepapers without ceasin. We have took them simply
because one was a Dimicrat paper and the other a Republican. We
have took them when payin for them kept me from gittin a new
dress or Jobe a change of pants.
We have took them though durin all them years they have said
the same things over and over agin, aginst each other and aginst
the party they wasent, jist at the time, gittin any campaign money or
county printin from.
The Dimicrat has allers called the Republicans rascals and sich,
and the Advercate never fails to show how the Dimicrats are worse
still.
Always, when the Advercate comes, Jobe he sets down and reads
out loud all the abuse agin the Dimicrats; then, lookin over his
specks at me, says:
“Now, Betsy, you see what kind of a party you belong to. You see
now what kind of leaders youve got,” &c., &c.
Its a regular thing for Jobe to read the same things week arter
week and then to criticise me and the Dimicrat party time arter time,
until for years Ive been in the habit of goin in and settin down and a
listenin to Jobe read the Advercate’s abuse of the Dimicrats, and a
waitin for my regular weekly tongue-lashin. Ive done it jist for the
good it seems to do Jobe.

“‘Now, Betsy, you see what kind of a party you belong to.’”

Sometimes to answer him I jist read from the Ohio Dimicrat the
same things he has read from the Advercate—only where the
Advercate says “the Dimicrat party,” the Dimicrat says “the
Republican party.”
Then Jobe will flare up and say:
“The Ohio Dimicrat is a dum dirty sheet, and full of lies.”
He knows that I dont swear and wont say that about his
Advercate, even if I know it is the same kind of a paper as the Ohio
Dimicrat is, except in the name at the top of the fust page. Of
course it gits its campaign money and public printin from the office-
seekin canderdate fellers of the other party.
Now, when Jake brought them papers, I happened to pick up the
Advercate (a thing I seldom do), and one of the fust things I read
was a article a praisin Mr. Cleveland for workin to git a “gold basis”
and “gold mortgages” and sich. I was so surprised to find a word of
praise for a Dimicrat president in a Republican noosepaper that I
looked twice at the headin to make sure it was the Advercate I had
instid of the Dimicrat. Sure enough it was the Advercate, but I dont
want you to blame Editure McIlvaine for sich a article appearin in his
paper. He couldent help it. It was in that part of his paper that he
dont print. It was in the patent part what is printed in Cleveland—
the part, you know, which them fellers down east, the fellers what
gits rich by havin on this gold basis bizness, pays to have in all
papers, Dimicrat, Republican, Methodist, Prisbyterian or any other
kind except them howlin Populist papers. Them Populists seem to be
so sot agin that “gold basis,” and a “contractin of the money to make
it scarce and hard to git,” that they wont put anything a favorin the
“gold basis” in their papers for love or money. They are jist that
mean.
So I dont want you to blame Mr. McIlvaine or any other feller for
sich articles a bein in their papers. They cant help it. They jist have
to do it or lose their rich money-lendin friends.
But the feelin I felt when I seed sich a article in a Republican
noosepaper prompted me to do the thing that, as I said afore,
nearly made me a weepin widder.
I jist thought Ide have some fun with Jobe.
So I went to work and cut the headin off from last week’s
Tuscarawas Advercate and pasted it over the headin of this week’s
Ohio Dimicrat. Then I cut the headin out of last week’s Ohio Dimicrat
and pasted it on this week’s Advercate. I then folded the papers up
nice like and laid them on the table in the settin-room, where I had
laid them week arter week for near onto fifteen years.
Arter supper, when Jobe had his chores all done up, he says, as he
come in from the barn:
“Betsy, has the mail come?”
A question that he has asked about that hour, on that same day of
the week, fifty-two times a year for these many years. The mail
alluded to meanin the Tuscarawas Advercate. I told Jobe, as usual,
that it was in on the table. He took his specks down off the kitchen
 mantel, and, wipin them as he
went on the corner of his coat
tail, approached the table.
He sot down, rared back in
his split-bottom rockin cheer,
put his feet on another, then
picked up the Ohio Dimicrat
(with its name changed), and
begin to read, as he expected,
Editure McIlvaine’s slaughter of
Dimocracy.
It started out with:

“There never was a more

corrupt gang in control of any
State government than the
Republican boodlers at
Columbus.”
“So I went to work and cut out Then:
the headin.”
“Every Republican
officeholder in this county
seems to exist for no other purpose than to suck the life-blood out
of our hard-working tax-payers. We must turn the rascals out.”
 “‘It is all over, Betsy,’ says he.”

And so on and so on, clear through the paper. Jobe he read a

minit or so; then looked at the name of the paper; then read
another item; looked at the top of his paper agin; took off his
specks; rubbed them hard; put them on and read, or started to
read, another item; laid the paper down; got up and went to the
lookin glass; stuck out his tongue and shook his head in a troubled
manner; then he felt his pulse, shook his head agin and fell over on
the lounge that was near him. He groaned once or twice, then
hollered, “Betsy, Betsy!” dyin like.
I went a hurryin in. There he laid as white as a ghost, and drawin
short, quick breaths.
“Why, Jobe, dear,” says I, pleadin like, “what on airth is the
matter?”
“It is all over, Betsy,” says he, “all over; Ime a goin to die. The end
is near. Betsy, Ive tried to be a good husband, but at times I know
Ive been a little cross and contrary. Betsy, I want to hear you say
you forgive me before I go.”
 “Why, Jobe,” says I, “what in the world is the matter?”
“Oh, Betsy,” says he, “the end is near. I know it is. Editure
McIlvaine is changed, or my mind is shattered. My mind is so
onbalanced that I can no longer read my paper and understand it, or
the leopard has changed his spots. Betsy, its me. It must be me, for
where my paper has been praisin, it is now abusin; and where it has
been abusin, it is now praisin. Betsy, I want to die. I want to die a
believin that its me and not the Advercate that has changed. You
must do the best you can, Betsy; and if you marry agin arter Ime
gone, remember my last wish is that you do not marry one of them
wild Populists. Betsy, will you promis?” says he.
At that I began to laf out loud, as hard as I could laf.
“Oh my! oh my!” says Jobe. “Is my wife crazy or do my eyes
deceive me agin?”
I took holt of him and jerked him off the lounge, sayin:
“Here! git up and have some sense. That is all the truth you read
in your paper to-nite. The office-seekers of both parties are corrupt,
and if the papers were honest they would say so. Neither of them
dare tell how the people have been betrayed, and so they fill up
their columns with abusin the party they dont happen to belong to.”

“That nite he slept in the barn.”

Then I explained what I had done, and he jumped to his feet and
swore awfully. That nite he slept in the barn, and for the second
time in her married life Betsy Gaskins slept alone. Jobe is still critical
and sleepin in the barn.
 CHAPTER XVII.
JOBE SLEEPS IN THE BARN.

IF Ide a knode that Ide a had to went through what Ive went
through since I last writ, I would have been a old maid longin for
some one to love, and some one to love me in return, instid of bein
the tormented wife of Jobe Gaskins, Esquire, as I am to-day.
From the time Jobe come in from the barn, the next mornin arter
nearly dyin over the Advercate’s change of abuse, to this hour, the
two old parties has been on the outs; and instid of gittin better,
things are gittin wuss.
The Lord only knows what it will lead to. I dont.
That mornin, about breakfast time, he come a bouncin into the
house all of a suddent, while I was a puttin some corn cakes in the
skillet, and, shakin his fist in my face, says, says he:
“Betsy Gaskins, you’ve got to take it back. Take it back or Ile—Ile
smash you,” makin a motion towards me, and, with his hair all
mussed up and full of hay-seed, he looked dangerful.
I jist drawed back the dipper what I was puttin batter in the skillet
with, sayin:
“Jobe Gaskins, you make another move towards me, or attempt to
strike me, and Ile knock you so cold youle never vote for another
Republican office-seeker.”
I was a lookin at him all the time with the dipper drawed. He seen
I meant jist what I said; so he walked over and sot down on the
edge of the wood-box. Continerin, says I:
 “‘Jobe Gaskins, you make another move!’”

“You are a purty-lookin feller, haint you? Thats as much sense as

you and your likes has got. You would strike down the pardner of
your life rather than listen to the truth about the rascality of the men
who run your party.”
I had the dipper drawed all the time, and had stepped nearer to
him.
“Betsy,” says he, pleadin like, “tell jist one dishonest thing a
Republican officer ever done.”
 Says I: “Now, Jobe, you are actin with sense. Where do you want
me to begin, at the top among the big ones, or at the bottom among
the little ones?”
“Begin at the bottom, Betsy, at the bottom,” says he.
“Well, Jobe,” says I, “you listen, and I will keep at the cakes or
they will burn.”
Thinkin a minit, says I:
“Fust, there is the county commissioners.”
“Hold!” says Jobe, jumpin to his feet, “dont lets go into that
commissioner bizness——”
I turned right square in front of him, and drawin the dipper, says
I:
“Now, sir, you set down, and set there till I tell you to git up.”
Jobe sot down.
Says I agin:
“Fust, there is the county commissioners and the bridges——”
“Betsy——” says Jobe, conquered like.
“Jobe!” says I, and I looked a look at him that made him drop his
head.
Then proceedin agin, says I:
“Fust, there is the county commissioners, the bridges and iron
tubes.”
Jobe flipped his thumb and fingers, and held up his hand like they
do in school.
Says I: “Whats you want?” cross like.
“Betsy, if you are a goin into that bridge bizness, with them iron
tubes and all, I would like to have my say as well as you,” says he.
“That depends,” says I. “If you act with sense and dont git mad,
you can have your say. If you flare up Ile silence you, sir.”
“Are you mad, Betsy?” says he, cowed like.
“No, Ime not mad. Ime in airnest,” says I, takin up the cakes and
settin them on the table. Then I sot down in a chair in front of Jobe,
still holdin the dipper. Says I:
“Now, Jobe, who is agent for a iron bridge company in this county
but a Republican county commissioner?
 “Who went over into a adjoining county and offered to sell a iron
bridge for several dollars per foot less than he charged his own
county for the same kind of a bridge? Who done this but a
Republican county commissioner?
“Who let a contract for stone butments for one of the leadin
bridges in this county, and then let them put in iron tubes instid of
stone butments? Who done this but a Republican county
commissioner?
“Who sold the Trenton bridge out in three sections at $999.99 a
section, so as to evade the law that says all public contracts for
$1,000 or more shall be advertised and sold to the lowest bidder?
Who done this sellin but a Republican county commissioner?
“Who gits a commission on all the bridges the taxpayers are a
payin for, but a Republican county commissioner?
“Who has tore down good bridges jist to git to sell a new bridge to
this county, but a Republican county commissioner?
“Who is it but Republican county commissioners that dont care
how high taxes are so they git their commission for sellin bridges?
 “‘Are you mad, Betsy?’ says he.”

“Who but a Republican county commissioner refused to allow the

expense necessary to collect the $65,000 back taxes, Beriar Wilk
——?”
“Hold! Hold!” cried Jobe, jumpin to his feet. “Wilkins was a
Dimicrat! Wilkins was a Dimicrat! A leadin Dimicrat, and you know it!
And more, Betsy Gaskins, when you say that nobody was mixed up
in that bridge bizness but a Republican county commissioner, you lie,
and——”
I dident let him finish. I couldent. I was teched. I jist grabbed the
mop-stick that was standin near, and struck at him with all my might
as he went out at the door. I follered him clear to the fence, strikin
at him as he went; and jist as he was crossin the fence I broke that
mop-stick (that cost me thirteen cents) on them election patches.
So my heart is heavier than it has been since I become the lawful
wife of Jobe Gaskins.
The idea of him a tellin me that I lie, this late in our lives! It is
awful! It teched me to the quick! Well, Jobe Gaskins got no
breakfast that day, and I was so worked up that I couldent eat
much.
That nite Jobe slept in the barn agin, comin in some time between
dark and daylite to get what vittles was cooked.
He stayed out around the barn for three days and nites, only
comin in arter I had gone to bed, to git what he needed to eat. I
dont know how long he would have kept it up if it hadent got cold
Thursday arternoon and evenin. That evenin he froze out, and came
up to the fence and hollered:
“Hello!”
I went to the door, and says:
“Hello, sir! What you want?”
“Betsy,” says he, “I would like for you to let me come in and lay by
the cookin stove to-nite.”
Says I: “If you wasent so set in your ways and insultin, you could
a been sleepin in your usual place, by my side, all these nites. Come
in,” says I, “and keep your mouth shet, and all will be well.”
He come in, and I set him a good warm supper. He eat three
bowlsful of corn mush, and drunk two big cups of hot coffee.
Now, I intend to git all the names and facts about that bridge
bizness, and that Beriar Wilkins back tax bizness, and them
commissioners, and Ile convince Jobe that all his high-toned
Republican officeholders are arter is the chance to get rich off from
the people’s money. Ile do it if it costs me a divorce suit to do it.
That nite Jobe went to bed fust. When I went in I found that he
had got in with his head to the foot. He thought it would spite me, I
spose. But it dident. I laffed and jist stood there and looked at him,
and while I was a lookin I couldent help thinkin how much he
represented his party on the money question. You know how they
use to claim that they was the party what believed in lots of
greenback money, and how they pinted with pride to the great
amount of greenbacks they had given the people to do bizness with.
Now they are turned end about, jist like Jobe. Now they claim they
are for “gold only,” that “lots of greenbacks haint good for the
people.” They are a sayin now agin silver and paper money jist what
Vallandingham and his likes said about greenbacks. But then this is
about the top fellers. So I wont discuss this any more until I git the
facts about them bottom fellers—about the county commissioners
and auditor and prosecutin attorney and Beriar Wilkins, and lots of
sich things that is done and bein done all over this country. Ile git
enough to drive Jobe clear under the bed, if I can hold him down to
listen to it.
Jobe says he is a goin to git the facts agin the Dimicrats if he has
to subscribe for every Republican noosepaper in the county. Now I
dont think he need to go to all that expense, because so fur as I can
see they are all alike and run for the same purpose—for the purpose
of keepin the Republican voters in line.
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.

Let us accompany you on the journey of exploring knowledge and

personal growth!

ebooknice.com