| Foreword | | xiii | |
| About the Authors | | xv | |
| About the Technical Reviewer | | xvii | |
| Acknowledgments | | xix | |
| Introduction | | xxi | |
| | 1 | |
| | 2 | |
| | 3 | |
| | 5 | |
| | 7 | |
| Document types, DOCTYPE switching, and browser modes |
| | 8 | |
| | 9 | |
| | 10 | |
| | 10 | |
| Getting your styles to hit the target |
| | 11 | |
| | 11 | |
| | 12 | |
| | 13 | |
| | 13 | |
| Child and adjacent sibling selectors |
| | 14 | |
| | 14 | |
| The cascade and specificity |
| | 16 | |
| | 16 | |
| Using specificity in your stylesheets |
| | 17 | |
| Adding a class or an ID to the body tag |
| | 18 | |
| | 18 | |
| Planning, organizing, and maintaining your stylesheets |
| | 19 | |
| Applying styles to your document |
| | 19 | |
| | 21 | |
| Adding structural comments |
| | 21 | |
| | 22 | |
| Removing comments and optimizing your stylesheets |
| | 23 | |
| | 23 | |
| Organizing your stylesheets for easy maintenance |
| | 24 | |
| | 25 | |
| Visual Formatting Model Recap |
| | 27 | |
| | 28 | |
| | 30 | |
| | 31 | |
| | 33 | |
| The visual formatting model |
| | 33 | |
| | 34 | |
| | 35 | |
| | 36 | |
| | 37 | |
| | 38 | |
| | 42 | |
| Background Images and Image Replacement |
| | 43 | |
| | 44 | |
| | 46 | |
| Fixed-width rounded-corner boxes |
| | 47 | |
| Flexible rounded-corner box |
| | 49 | |
| | 52 | |
| | 53 | |
| | 54 | |
| Drop shadows a la Clagnut |
| | 57 | |
| | 57 | |
| Onion skinned drop shadows |
| | 61 | |
| | 63 | |
| Fahrner Image Replacement (FIR) |
| | 64 | |
| | 64 | |
| | 65 | |
| Inman Flash Replacement (IFR) and Scalable Inman Flash Replacement (sIFR) |
| | 66 | |
| | 67 | |
| | 69 | |
| | 70 | |
| | 71 | |
| | 72 | |
| Highlighting different types of link |
| | 73 | |
| Highlighting downloadable documents and feeds |
| | 75 | |
| Creating buttons and rollovers |
| | 76 | |
| | 77 | |
| | 78 | |
| | 78 | |
| | 80 | |
| | 81 | |
| | 83 | |
| Styling Lists and Creating Nav Bars |
| | 85 | |
| | 86 | |
| Creating a vertical nav bar |
| | 87 | |
| Highlighting the current page in a nav bar |
| | 90 | |
| Creating a horizontal nav bar |
| | 91 | |
| Simplified ``sliding doors'' tabbed navigation |
| | 93 | |
| | 96 | |
| | 99 | |
| | 104 | |
| A short note about definition lists |
| | 108 | |
| | 109 | |
| Styling Forms and Data Tables |
| | 111 | |
| | 112 | |
| | 114 | |
| | 114 | |
| | 114 | |
| | 115 | |
| | 115 | |
| | 116 | |
| | 117 | |
| | 118 | |
| | 119 | |
| | 119 | |
| | 120 | |
| | 120 | |
| | 122 | |
| | 124 | |
| | 125 | |
| | 125 | |
| | 126 | |
| | 128 | |
| | 130 | |
| | 132 | |
| | 133 | |
| | 134 | |
| Centering a design using auto margins |
| | 134 | |
| Centering a design using positioning and negative margins |
| | 136 | |
| | 137 | |
| Two-column floated layout |
| | 137 | |
| Three-column floated layout |
| | 140 | |
| Fixed-width, liquid, and elastic layout |
| | 141 | |
| | 142 | |
| | 144 | |
| | 146 | |
| Liquid and elastic images |
| | 147 | |
| | 149 | |
| | 152 | |
| | 153 | |
| An introduction to hacks and filters |
| | 154 | |
| A warning about hacks and filters |
| | 154 | |
| | 155 | |
| Filtering separate stylesheets |
| | 156 | |
| Internet Explorer conditional comments |
| | 157 | |
| | 158 | |
| Filtering individual rules and declarations |
| | 160 | |
| | 160 | |
| | 160 | |
| | 162 | |
| IE/Mac commented backslash hack |
| | 162 | |
| The escaped property hack |
| | 163 | |
| | 163 | |
| The modified simplified box model hack |
| | 164 | |
| The ¡important and underscore hacks |
| | 164 | |
| | 165 | |
| | 166 | |
| | 167 | |
| | 168 | |
| | 168 | |
| Problems with specificity and sort order |
| | 169 | |
| Problems with margin collapsing |
| | 170 | |
| | 171 | |
| | 173 | |
| Creating a minimal test case |
| | 174 | |
| Fix the problem, not the symptoms |
| | 174 | |
| | 174 | |
| | 175 | |
| | 175 | |
| What effect does layout have? |
| | 176 | |
| Common bugs and their fixes |
| | 177 | |
| | 178 | |
| | 178 | |
| IE 6 duplicate character bug |
| | 181 | |
| | 182 | |
| Absolute positioning in a relative container |
| | 182 | |
| Stop picking on Internet Explorer |
| | 183 | |
| | 184 | |
| Case Study 1: More Than Doodles |
| | 185 | |
| | 186 | |
| Controlling content area with descendant selectors |
| | 188 | |
| | 188 | |
| A note about naming conventions |
| | 189 | |
| | 189 | |
| | 190 | |
| | 191 | |
| Removing unwanted columns |
| | 192 | |
| | 193 | |
| | 194 | |
| Floating the columns in the right place |
| | 195 | |
| Highlighting the current page based on the body class |
| | 196 | |
| Drop-in boxes for columns |
| | 198 | |
| Right-angled or rounded corners---you decide |
| | 199 | |
| Flat, right-angled corners |
| | 199 | |
| So, let's prepare for something special |
| | 200 | |
| Transparent custom corners and borders |
| | 201 | |
| | 202 | |
| | 202 | |
| Combining classes for targeted actions |
| | 204 | |
| Image classes and exceptions |
| | 206 | |
| | 206 | |
| | 207 | |
| | 207 | |
| | 210 | |
| Understanding the sidebar links |
| | 210 | |
| Checked-off visited links |
| | 210 | |
| | 212 | |
| Highlighting external links |
| | 213 | |
| Floated drop shadows (gallery) |
| | 214 | |
| | 214 | |
| | 215 | |
| | 216 | |
| Case Study 2: Tuscany Luxury Resorts |
| | 217 | |
| | 218 | |
| | 219 | |
| | 221 | |
| | 221 | |
| | 222 | |
| | 224 | |
| | 225 | |
| Resolving fluid layout issues |
| | 225 | |
| Aligning elements using absolute positioning |
| | 226 | |
| Location properties (top, bottom, left, right) |
| | 227 | |
| | 229 | |
| Background image techniques |
| | 230 | |
| Dividing the top in three |
| | 231 | |
| ``Bulletproofing'' a background |
| | 232 | |
| | 234 | |
| | 235 | |
| Initial cap image replacement |
| | 236 | |
| | 237 | |
| | 238 | |
| Using a single list item for multiple elements |
| | 240 | |
| | 240 | |
| | 244 | |
| Index | | 245 | |