Index
: (colon), 50
{ } (curly brackets), 10, 11, 27, 28
" " (quote marks), 4, 9, 25, 28, 43
; (semicolon), 10, 27, 28, 50, 131
#container styles, 132
# sign, 132–133
* HTML hack, 82, 110–111, 119, 225
@import directive, 12–13, 19, 46–47
3-D positioning, 78
3 pixel text jog bug, 102–104
A
absolute positioning, 77
absolute-size fonts, 112
adjacent selectors, 23
advanced selectors, 30–36
:after pseudo-element, 25, 118, 120
Agency for Prevention of Spontaneous Dancing. See APoSD site
almost-standards mode, 57
APoSD site, 198–228
image credits, 268–269
page code, 201–214
problems/solutions, 215–228
site concept inspiration, 268
as viewed in different browsers, 199–200
attributes
and HTML tag structure, 5
targeting, 25–26
troubleshooting, 9
attribute selectors, 25–26
author styles, 17
B
background colors, 61
background images, 116, 215–216, 252
base font size, 114
block elements, 76
bold text, 7
border property, 33–34, 61, 79
bottom margin bug, 105
box model
components of element box, 79
and IE browser versions, 80
and outline property, 62
problems, 79–81
workarounds for broken, 81, 119
and z-axis hierarchy, 78
breaks, 7
browser bugs, 75–120
clearing floats, 85–94
disappearing content, 105–111
double margin float, 104, 187, 188
extra white space in lists, 97–100, 120, 175
float stepdown, 94–96, 187, 188–190, 193–195
hasLayout problem, 82–85
IE's broken box model, 79–81
margin errors, 101–105
resources, 263
text size, 115–116
vs. coding errors, 74
browsers. See also specific browsers
compatibility across, 82, 111, 116, 178, 198
consistency across, 37, 114, 254, 266
and CSS3 properties, 116–117
default styles for, 17, 175, 257
and doctype declarations, 56–58
problems with (See browser bugs)
and relative font sizes, 114–115
standards-compliant, 56–57
and text sizing, 222–223
usage statistics, 83
and W3C box model, 62, 80 (See also box model)
browser-support charts, 256
Browser Who Hated Me case study, 197–228
design viewed in different browsers, 199–200
image credits, 268–269
page code, 201–214
problems/solutions, 215–228
site concept inspiration, 268
<br> tag, 7
<b> tag, 7
bugs. See also browser bugs; debugging
and document flow, 76–77
margin, 101–105
C
Cascading Style Sheets, 257. See also CSS
case-sensitivity, 4
case studies
Browser Who Hated Me, 197–228
Devilish Details, 123–134
Float with Mind of Its Own, 177–196
LOL Layout, 229–254
Mistaken Identity, 135–156
Single White Space, 157–176
child elements, 16
christopherschmitt.com, 265
Chrome. See Google Chrome
classitis, 40
class selectors, 20–21
clear property, 88–90, 109, 118
code
commenting out sections of, 64–67
debugging, 71–74
code validators. See validators
coding case studies. See case studies
coding errors, 74. See also debugging
collapsed margins, 101
colon (:), 50
color blindness simulator, 261
color-scheme information, 46
column sizing, 116
combinators, 22
comments
conditional, 82, 119, 251, 253, 261–262
as debugging tool, 64–67
nesting, 14
compatibility, cross-browser, 82, 111, 116, 178, 198
conditional comments, 82, 119, 251, 253, 261–262
consistency, cross-browser, 37, 114, 254, 266
contact information, 46
container selector, 132
content
disappearing, 105–108
generated, 118
separating presentation from, 8–9
and W3C box model, 79
contextual selectors, 22–23, 30–31
cross-browser compatibility, 82, 111, 116, 178, 198
cross-browser consistency, 37, 114, 254, 266
cross-browser testing, 227, 264
CSS
browser-support chart, 256
case studies (See case studies)
conditional comments, 82, 119, 251, 253, 261–262
document hierarchy, 14–16
document structure, 10–14
element relationships, 15–16
eliminating sections of, 72
floats, 85 (See also floats)
foundational concepts, 14–28, 76–77
frameworks, 259
hacks, 82
how cascade works, 16–19
properties and values charts, 258
readability considerations, 26–27
resources, 256–266
selectors (See selectors)
styles of writing, 26–27
validating, 52, 55, 130, 134, 260–261
writing sleek, 42–43
CSS3
Property Support table, 117
selectors, 256
validation, 245
CSS-Class.com, 263
CSS-Tricks.com, 262
curly brackets ({ }), 10, 11, 27, 28
D
<dd>s, 192–193
debugging. See also troubleshooting
resources, 264
step-by-step process, 71–74
techniques, 60–67
default values, 42
definition lists, 192–193
descendant elements, 15
descendant selectors, 22, 43, 44
design, standards-based, 11, 160
design comps
EateryJunkie site, 137
FarfallaEffect site, 124
Nena Adornments site, 158
developer information, 46
Developer Toolbar, 68
Developer Tools, MSIE's, 68
Devilish Details case study, 123–134
design comp vs. home page, 124–125
image credits, 267
page code, 126–130
page-validation results, 130
problems/fixes, 131–134
disappearing content, 105–111
display: inline property, 188, 189, 196
display property, 84, 94, 118, 119, 120, 262
divitis, 40
doctype declaration, 52, 55, 56. See also doctypes; DTD
choosing, 58
HTML vs. XHTML, 4–5
list of valid, 56
purpose of, 56
resources, 260
traditional vs. strict, 255
troubleshooting, 58–60
document flow, 76–77
document hierarchy, 14–16
document-level styles, 13
documents
accessibility of, 7
employing styles in, 11–14
establishing relationship between, 11–12
document structure
CSS, 10–14
HTML, 4–9
document tree, 15
document type definition, 52. See also DTD
DOM Inspector for Firefox, 68
double margin float bug, 104, 187, 188, 190–191, 249
Dreamweaver, 68
DTD
anatomy of, 55–56
meaning of acronym, 52
dynamic pseudo-classes, 23–24
E
Easter egg, 253
easy-clear method, 88–90, 110, 120
EateryJunkie site, 136–156
design comp, 137
home page, 137
image credits, 268
page code, 137–147
problems/solutions, 149–156
validation results, 148
edgeofmyseat.com, 263
elated.com, 266
element ancestry, 15–16
elements
adding borders to, 61
applying multiple class styles to, 31
block vs. inline, 76
controlling placement of, 77–78
and document flow, 76–77
floating, 86–87
highlighting, 61
with layout, 83
overlapping, 114–115
resetting styles for, 37–38
understanding relationship between, 14–16
vs. tags, 6
element selectors, 20
<em> tag, 7
errors
punctuation, 134
ex (unit of measure), 114
F
FarfallaEffect site, 124–134
design comp, 124
home page, 125
page code, 126–130
problems/fixes, 131–134
validation results, 130
file-created date, 46
file-last-edited date, 46
Firebug, 68
Firefox
and CSS3 properties, 116
DOM Inspector for, 68
and drop shadows, 251
as example of modern browser, 178
extensions, 261
and rounded corners, 251
fixed positioning, 77
fixed-size fonts, 112
float drop bug, 94–95, 169, 188, 220, 249
float property, 84, 86, 119, 120
floats, 85–96
clearing, 42, 87, 88–94, 150, 156, 221
how they work, 86–87
problems with, 94–96, 120, 195–196
ways of using, 85
float stepdown bug, 94–96, 187, 188–190, 193–195
Float with Mind of Its Own case study, 177–196
design viewed in different browsers, 179
image credits, 268
page code, 180–186
problems/solutions, 187–196
validation results, 187
flow, document, 76–77
font property, 35
fonts, 111–116. See also text
font-face vs. font-family, 149
importing, 116
serif vs. non-serif, 150
sizing options, 111–114
font-size conversion, 113
font-size property, 118
footers, 172, 174, 224–226, 232, 249–250
forabeautifulweb.com, 263
frameworks, CSS, 259
freelancefolder.com, 264
G
green-beast.com, 266
guillotine bug, 108–111, 117, 118, 224–226
H
hasLayout
issues/problems, 82–85
overriding, 84–85
hasLayout.net, 265
height property, 84, 117, 119, 247
hexadecimal color values, 36, 46, 62
hierarchy
document, 14–16
z-axis, 78
hooks, 39
HTML
best practices, 3
characteristics of "well-formed," 4
document structure, 4–9
eliminating sections of, 72
hacks, 82
lists (See lists)
meaning of acronym, 4
resources, 255–256
semantic, 6, 8 (See also POSH)
tag structure, 5 (See also tags)
tailored, 39–42
troubleshooting, 8–9
validating, 7, 9, 52, 55, 260–261
versions, 4
Hypertext Markup Language, 4. See also HTML
I
IE. See also specific versions
bugs, 79–81, 104–105, 108–111, 224–226, 262–263
clearing methods, 90
and CSS3 properties, 116
and CSS support, 257
doctype modes in, 260
and float drop, 94
and font resizing, 112
hasLayout problems, 82–85, 254
installer, 264
and text sizing, 223
usage statistics, 83
IE5, 57
IE6
and child selectors, 82
clearing method, 90
CSS enhancements in, 260
double margin float bug, 104, 187, 188, 190–191
and floats, 195–196
float stepdown bug, 95–96, 187, 193–195
guillotine bug, 224–226
list white-space bug, 97–100
and min-height property, 117
and min-width property, 117
and outline property, 62
text size bug, 115–116
and text sizing, 223
and underscore hack, 82
IE7
bottom margin bug, 105
clearing method, 90
and floats, 195–196
float stepdown bug, 187, 193–195
and outline property, 62
and text sizing, 223
IETester, 264
image credits, 267–269
images
positioning, 131, 132, 171, 191, 216
sliced, 57
@import directive, 12–13, 19, 46–47
importing fonts, 116
inline elements, 76
Internet Explorer. See IE
Internet resources, 255–266
K
L
layout
case study (See LOL Layout case study)
characteristics of elements with, 83
engines, 257
removing/overriding, 84–85, 119
using tables for, 7
line-height property, 108, 116, 117, 120
link pseudo-classes, 23
link styles, 24
<link> tag, 11–12
lists
definition, 192–193
extra white space in, 97–100, 120, 175
proper structure for, 266
where to implement, 266
list-style property, 35
list white-space bug, 97–100, 120, 175, 176
LOL Layout case study, 229–254
design viewed in different browsers, 231–232
image credits, 269
page code, 233–244
problems/solutions, 233, 246–254
site concept inspiration, 269
validation results, 244–246
loose mode, 56–57
M
margin bugs, 101–105
margin property, 32–33, 37, 63
margins, 79, 81, 101–105, 120, 168–172
markup validation service, 260–261
max-width property, 119
measurement units, 42, 50, 111–114, 131
menus, 73
Meyer, Eric, 259
Microsoft
Developer's Network, 261
hasLayout overview, 264
Internet Explorer (See IE)
min-height property, 84, 117, 119
min-width property, 84, 117, 119
misspellings, 11, 47, 131, 175
Mistaken Identity case study, 135–156
design comp, 137
home page, 137
image credits, 268
page code, 137–147
problems/solutions, 149–156
validation results, 148
Mozilla, 246, 260, 261. See also Firefox
MSIE's Developer Tools, 68
Multiple IE installer, 264
my-debugbar.com, 264
N
naming conventions/rules, 40, 48, 156
navigation bars, 72, 168, 190, 216–220, 223
navigation menus, 73
negative margins, 101–102
Nena Adornments site, 158–176
design comp, 158
image credits, 267
page code, 160–167
problems/solutions, 168–175
site-design inspiration, 267
validation results, 167–168
nesting
comments, 14
tags, 9
Netscape Navigator, 57
O
offset values, 77
Oh-Hai.com site, 230–254
Easter egg, 253
logo, 253
original design, 231
page code, 233–244
problems/solutions, 233, 246–254
validation results, 244–246
as viewed in different browsers, 231–232
online resources, 255–266
Opera, 178, 251, 260, 262, 266
outline property, 62
overflow: auto property, 84, 93–94, 107, 118, 119, 120
overflow: hidden property, 84–85, 91–95, 120, 156, 196
overflow property, 84, 91–94, 119, 120, 150–151
overflow: scroll property, 84, 92, 107, 119, 120
overflow: visible property, 85, 91, 119
P
padding
and browser default values, 168
and CSS box model, 79
and spacing problems, 168–172, 175
and unordered lists, 172
workarounds, 81
padding property, 33, 37, 63, 118, 169
page logos. See logos
page semantics, 39
page zooming, 115
paragraph breaks, 7
peekaboo bug, 105–108, 117, 118, 249
percentage font-sizing, 112, 113, 114, 115
photo credits, 267–269
photos. See images
Plain Old Semantic HTML, 6. See also POSH
PNG image files, 245, 252, 265
POSH, 6–9
benefits of using, 8
meaning of acronym, 6
practices for achieving, 7
purpose of, 6
troubleshooting, 8–9
Position Is Everything, 263
position property, 77, 84, 118, 119, 131
presentation, separating content from, 8–9
properties. See also specific properties
bug fixes for, 117–120
CSS2, 258
resources, 258
shorthand equivalents for, 31–36
troubleshooting, 27
pseudo-class selectors, 23–24
pseudo-elements, 24–25
Q
quick-fix styles, 120
quirks mode, 56–57, 58, 80, 260
Quirksmode.org, 117, 256, 260, 262
quote marks (" "), 4, 9, 25, 28, 43
R
Raymond Jay site, 178–196
image credits, 268
page code, 180–186
problems/solutions, 187–196
validation results, 187
as viewed in different browsers, 179
readability, 26, 114, 115, 261
relative positioning, 77, 218–219
relative-size fonts, 112–114
relative text sizes, 133
rel attribute, 12
rendering modes, 56–57
resources, 255–266
RGB color values, 36
RSS buttons, 152
S
satzansatz.de, 264–265
scaling, 114–115
screen readers, 7
selectors, 20–26
advanced, 30–36
checking browser support for, 22, 24, 256–257
complex relationship, 30–31
creating/placing, 43
and CSS document structure, 10
esoteric, 24–26
general, 20–21
pseudo-class, 23–24
relationship-based, 22–23
semantic hooks, 39
Semantic HTML, 6, 8. See also POSH
semicolon (;), 10, 27, 28, 50, 131
shorthand properties, 32–36
shrink-to-fit, 83
sibling elements, 16
sibling selectors, 23
simple-clear method, 91–94
Single White Space case study, 157–176
image credits, 267
page code, 160–167
problems/solutions, 168–175
site-design inspiration, 267
validation results, 167–168
sitepoint.com, 265
sliced images, 57
spaces, 7, 63, 90. See also white space
spacing
and absence of margins/padding, 168–172, 175
and negative margins, 102
rules, 73
spelling errors, 11, 47, 131, 175
standards-based design, 11, 160
standards-based markup, 8. See also POSH
star HTML hack, 82, 110–111, 119, 225
static positioning, 77
strings, 43
<strong> tag, 7
style declarations, 17, 26–27, 43, 45
style order, 19
styles. See also style sheets
author, 17
changing order of, 16
creating titles for groups of, 14
disabling, 67
document-level, 13
external, 11–13
naming, 40
organizing, 44
resetting, 37–38
temporarily removing, 14
troubleshooting, 14
user, 17
user-agent, 257
style sheets. See also styles
connecting to HTML documents, 11–12
creating IE-only, 262
creating multiple, 46–47
linking to, 12
organizing, 45
resources, 257
standardized, 44–47
T
table-based layouts, 57
table of contents, 45–46
tables, 7
tabular data, 7
tags
nesting, 9
syntax for, 5
troubleshooting, 8–9
vs. elements, 6
testing, cross-browser, 227, 264
text. See also fonts
aligning with other elements, 152
text jog bug, 3 pixel, 102–104
three-D positioning, 78
tredosoft.com, 264
troubleshooting. See also debugging
developer tools for, 68
by dismantling everything, 70
doctypes, 58–60
HTML, 8–9
by process of elimination, 69
by rebuilding from ground up, 70
selectors, 67–68
by simplifying cascade, 68
style shorthand, 36
taking breaks during, 71
using comment element for, 14
validation, 54–55
twinhelix.com, 265
type attribute, 12
type selectors, 20
typography, 114–115
U
<ul>s, 251
underscore hack, 119
units of measure, 42, 50, 111–114, 131
universal selector, 20, 38, 62
usability, 114
user agents, 17. See also browsers
user-agent style sheets, 257
user styles, 17
V
validation, 52–55
defined, 52
errors vs. warnings, 54
interpreting results from, 53, 130–133
troubleshooting, 54–55
validators, 52, 260–261. See also validation
values
charts, 258
and HTML tag structure, 5
resources, 258
Virtuelvis.com, 262
Vischeck.com, 261
W
W3C
box model, 62 (See also box model)
CSS3 specification, 117
and HTML versions, 4
list of valid doctypes, 56
list of values for display property, 262
meaning of acronym, 4
resource for interpreting validation results, 53
WAVE, 261
web browsers. See browsers
WebCredible.co.uk, 263
web design, 158, 255. See also design comps
Webkit, 246
web resources, 255–266
Weyl, Estelle, 264
white space, 50, 97–100, 120, 175, 176
White Space case study, 157–176
image credits, 267
page code, 160–167
problems/solutions, 168–175
site-design inspiration, 267
validation results, 167–168
width property, 84, 117, 119, 120
World Wide Web Consortium, 4. See also W3C
worthwhile.com, 266
WYSIWYG editors, 56
X
XHTML
purpose of, 4
resources, 255–256
sample validation results, 167
transitional doctype definition, 5
XML syntax, 4
Z
zero values, 42