sitepoint the css anthology 101 essential tips tricks hacks 3rd edition sep 2009 4215

Summary of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii

1. Making a Start with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

2. Text Styling and Other Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3. CSS and Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

4. Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

5. Tabular Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

6. Forms and User Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177

7. Cross-browser Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

8. Accessibility and Alternative Devices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

9. CSS Positioning and Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373


Download at WoweBook.Com


Download at WoweBook.Com

iv

The CSS Anthology: 101 Essential Tips, Tricks & Hacks
by Rachel Andrew
Copyright © 2009 SitePoint Pty Ltd
Managing Editor: Chris Wyness

Technical Director: Kevin Yank

Technical Editor: Andrew Tetlaw

Cover Design: Alex Walker

Editor: Kelly Steele
Latest Update: July 2009

Printing History:
First Edition: November 2004
Second Edition: May 2007
Third Edition: July 2009

Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted
in any form or by any means, without the prior written permission of the publisher, except in the case
of brief quotations embedded in critical articles or reviews.

Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein.
However, the information contained in this book is sold without warranty, either express or implied.
Neither the authors and SitePoint Pty Ltd, nor its dealers or distributors will be held liable for any

damages to be caused either directly or indirectly by the instructions contained in this book, or by the
software or hardware products described herein.

Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only
in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of
the trademark.

Published by SitePoint Pty Ltd

Web: www.sitepoint.com

Email:

ISBN 978-0-9805768-0-1

Printed and bound in Canada


Download at WoweBook.Com


v

About the Author
Rachel Andrew is a director of web solutions provider edgeofmyseat.com and a web developer.
When not writing code, she writes about writing code and is the author of several SitePoint
books, including HTML Utopia: Designing Without Tables Using CSS and Everything You
Know About CSS Is Wrong!, which promote the practical use of web standards alongside
other everyday tools and technologies. Rachel takes a common sense, real world approach

to web standards, with her writing and teaching being based on the experiences she has in
her own company every day.
Rachel lives in the UK with her partner Drew and daughter Bethany. When not working,
they can often be found wandering around the English countryside hunting for geocaches
and nice pubs that serve Sunday lunch and a good beer.

About the Technical Editor
Andrew Tetlaw has been tinkering with web sites as a web developer since 1997. At SitePoint
he is dedicated to making the world a better place through the technical editing of SitePoint
books, kits, articles, and newsletters. He is also a busy father of five, enjoys coffee, and often
neglects his blog at />
About the Technical Director
As Technical Director for SitePoint, Kevin Yank keeps abreast of all that is new and exciting
in web technology. Best known for his book, Build Your Own Database Driven Website Using
PHP & MySQL, he also co-authored Simply JavaScript with Cameron Adams and Everything
You Know About CSS Is Wrong! with Rachel Andrew. In addition, Kevin hosts the SitePoint
Podcast and writes the SitePoint Tech Times, a free email newsletter that goes out to over
240,000 subscribers worldwide.
Kevin lives in Melbourne, Australia and enjoys speaking at conferences, as well as visiting
friends and family in Canada. He’s also passionate about performing improvised comedy
theater with Impro Melbourne ( and flying light aircraft.
Kevin’s personal blog is Yes, I’m Canadian ( />
About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for web
professionals. Visit to access our blogs, books, newsletters, articles,
podcasts, and community forums.

Download at WoweBook.Com

387

buttons displaying as, 187

differentiation with class selectors, 8

flowing around forms, 186

grayscale for print styles, 273

in relation to images, 80, 296, 299, 364

right aligning, 305

text files, style sheets as, 4

text sizing, 24, 307

(see also resizing text)

text styling, 19–61

(see also paragraphs)

adding background colors, 38

altering line-heights, 44

case changes, 50, 51

centering, 49

closing up headings, 41

formatting bulleted lists, 52, 54

highlighting, 43

horizontal rules, 47

indenting, 48, 49

justification, 45

list item styling, 56

modifying links, 30–36

underlining headings, 39

text-align property, 45, 46, 49, 151, 314

<textarea> elements, 179

text-decoration property, 30–32, 39, 202–

204

text-indent property, 49

text-only devices

(see also screen readers)

forms suitable for, 187

grouping form fields, 196, 199

Lynx browser testing, 257

styling for, 261

text-transform property, 50–51


<th> elements, 144

calendar example, 169, 171

editable table form, 211, 212

styling, 151

styling with borders, 145

three-column layouts, 350, 356

with CSS tables, 369

thumbnail galleries, 360–365

tiling, background-images, 67

<tr> elements, 155, 158, 159

transparency and IE6, 241, 246

transparent images, 241, 246

Tredosoft site, 227

troubleshooting CSS, 248

tty media type, 262

two-column layouts, 322, 331, 335, 341

type attribute, <input> element, 183

type attribute, <style> element, 4

type selectors, 7

typefaces (see fonts)


U
Ubuntu Live CD, 221

UDM4 menu, 131

underlining, 30, 32, 39, 40, 201

units, font size

background-position property, 71, 74

line-height property and, 45

for printing, 271

user resizing, 307, 329

unobtrusive JavaScript, 160

unordered lists (see lists)

uppercase text, 50, 51

usability, 152, 178

user interaction effects, JavaScript, 159


Download at WoweBook.Com


388

user interfaces (see forms)

user selection of style sheets, 274


V


Y
YUI Graded Browser Support chart, 228


Z

:visited pseudo-class, 13, 34

validation, 238, 248, 249, 251

Virtual PC, 226

VirtualBox VM software, 222

virtualization software, 222, 224

:visited pseudo-class, 13, 34

visually impaired users, 255, 278

(see also screen readers)

VMWare Fusion, 223

VMWare Workstation, 222, 224


zoom layouts, 278


W
W3C (World Wide Web Consortium), 251

Walker, Alex, 321

warnings, validator, 251, 252

WebKit-based browsers, 219, 224

weight, 15

WellStyled.com rollover technique, 122

whitespace, unwanted, 185

width property

left navigation menu, 327

suppressing wrapping, 365

Windows users, 220, 221, 258

wrapper <div> element, 338

wrapping effect, thumbnail gallery, 364,

365


X

XHTML, 233, 234, 251

(see also HTML)

x-ua-compatible, 246


Download at WoweBook.Com