A More Perfect
Union with CSS
Christopher Schmitt
http://twitter.com/teleject

Christopher Schmitt
http://twitter.com/teleject

how do we go about
?
solving our problems

we solve problems by
realizing the limitations

#1
Our Experience
Limits Our Designs

It’s Always a
Plumbing
Problem

#2
Our Browsers
Limit Our Design

part 2: applications

HTML+CSS
Example #1
http://www.flickr.com/photos/o2ma/186648711/

<p>...</p>
<p>...</p>
<blockquote>
<p>Ma quande lingues coalesce, li
grammatica del resultant
lingue es plu simplic e regulari quam
ti.</p>
</blockquote>
<p>...</p>
<p>...</p>

blockquote {
background-image: url(bracket_left.gif);
background-repeat: no-repeat;
padding: 10px 0 0 27px;
width: 175px;
margin: 0 0.7em 0 0;
float: left;
font-family: Georgia, Times, \"Times New Roman\",
serif;
font-size: 1.2em;
font-style: italic;
color: black;
}

blockquote p {
background-image: url(bracket_right.gif);
background-repeat: no-repeat;
background-position: bottom right;
margin: 0;
padding: 0 22px 10px 0;
width:150px;
text-align: justify;
line-height: 1.3em;
}

<blockquote>
bracket_left.gif
<p>
bracket_right.gif

HTML+CSS
Example #2

Semantic
Markup

91
http://www.w3.org/TR/html4/index/elements.html

<h1><a href=\"http://
www.usa.gov/\">United States of America</
a></h1>
<ol><!-- Listing of States -->
<li><a href=\"http://www.alabama.gov/\">
<strong>State of Alabama</strong><i></i>
</a></li>
<li><a href=\"http://www.ct.gov/\">
<em><strong>State of Connecticut</
strong></em><i></i>
</a></li>
...
</ol>

Some Common
HTML Errors
• <p>&nbsp;</p>
• <p> ... <br><br><br> ... <br><br><br>...
• <h2>Subject Matter<br></h2>
• <p><h2>Subject Matter</h2></p>
• <p><img ></p>

Setting Up
the Easel

3D View of Box Model

“CSS Reset”
• http://developer.yahoo.com/yui/reset/
• http://meyerweb.com/eric/thoughts/
2007/04/12/reset-styles/
• http://meyerweb.com/eric/tools/css/reset/
index.html

<div id=\"easel\">
<h1><a href=\"http://
www.usa.gov/\">United States of America</
a></h1>
<ol><!-- Listing of States -->
<li><a href=\"http://www.alabama.gov/\">
<strong>State of Alabama</strong>
</a></li>
...
</ol>
</div><!-- /easel -->

body {
margin: 10px 0 0 0;
padding: 0;
text-align: center;
}
#easel {
width: 955px;
margin: 0 auto;
text-align: left;
position: relative;
}

Clearing Out
the Content

#easel ol {
list-style: none;
margin: 0;
padding: 0;
}
#easel strong {
display: none;
}

Striping

Normal Flow
• While normal flow is the default method of
rendering a page, the placement of the
elements can be altered
• Floats
• CSS position property
• Values: absolute, relative, fixed or static

Absolute Positioning
• When an element is absolutely positioned, it
is taken out of normal flow and positioned
relative to the edges of its containing box,
according to its offset properties.
• Absolutely positioned elements are ignored
by other elements within normal flow.

Relative Positioning
• When an element is relatively positioned, it is
initially placed within normal flow, and then
adjusted according to its offset properties.
• #positioned {
position: relative;
top: 50px;
right: 30px;
background-color: #eee;
}

Relative Positioning
• The browser lays out the paragraphs according
to normal flow, then offsets the positioned
paragraph 50 pixels from the top, and 30 pixels
from the right of its default position.
• And like absolute positioning, relatively
positioned elements can overlap other
elements.
• Note that if you don’t specify any offset
properties for a relatively positioned element, it
is placed according to normal flow.

#easel {
width: 955px;
margin: 0 auto;
text-align: left;
position: relative;
}
#easel em {
width: 955px;
height: 50px;
display: block;
background: #BF0A30;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

13

Attribute Selectors
• a[title] { /* rules */ }
a[href] { /* rules */ }
• p[id] { /* rules */ }
p[class] { /* rules */ }
• img[alt] { /* rules */ }
img[src] { /* rules */ }
• blockquote[cite] { /* rules */ }

a[href=\"http://delaware.gov/\"] em {
background: white;
top: 50px;
left: 0;
}
a[href=\"http://www.georgia.gov/\"] em {
top: 100px;
left: 0;
}
...

Pooling the Stars

h1 a {
position: absolute;
width: 440px;
height: 350px;
background: #002868;
text-indent: -9999em;
margin: 0;
padding: 0;
z-index: 20;
}

Getting Rid of Text
• sIFR (Scalable Inman Flash Replacement):
http://wiki.novemberborn.net/sifr3
• Image Replacement Rundown:
http://mezzoblue.com/tests/revised-image-
replacement/

Stars

Block Level - <h2>
Inline - <strong>

a[href=\"http://www.alabama.gov/\"] i {
background-image: url(stars.gif);
display: block;
position: absolute;
top: 13px;
left: 13px;
z-index: 50;
width: 24px;
height: 23px;
}

Texture

Alpha Transparency (PNGs)
http://christopherschmitt.com/2007/10/30/png-transparency-
for-internet-explorer-ie6-and-beyond/

Alpha Transparency (PNGs)

Adding PNGs
• First, download the .htc script at TwinHelix
Designs.
• http://www.twinhelix.com/css/iepngfix/

Adding PNGs
• First, download the .htc script at TwinHelix
Designs.
• http://www.twinhelix.com/css/iepngfix/
• After downloading the script, upload the
script to your Web server.

Adding PNGs
• Then, create a blank gif file.
• This image file is 1×1 pixel with the color
set as transparent. Within the .htc script,
change the line that references the
blank.gif file so that it points to your gif’s
location on the server.

Adding PNGs
• Create a separate CSS file (we’ll name it
ie.css), and include within in the following
single line, referencing the location of
the .htc file:
• img {
behavior: url(iepngfix.htc);
}

Adding PNGs
• But, we only want to load this CSS file when
the page is viewed in IE6-.
• Use conditional comments:
<!--[if lte IE 6]>
<link rel=\"stylesheet\" type=\"text/css\"
media=\"screen\" href=\"ie.css\" />
<![endif]-->

#easel em {
width: 955px;
height: 50px;
display: block;
background: #BF0A30;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-image: url(flag_bkgd.png);
background-position: 50%;
background-attachment: fixed;
}

#easel h1 a {
position: absolute;
width: 440px;
height: 350px;
background: #002868;
text-indent: -9999em;
margin: 0;
padding: 0;
z-index: 20;
background-image: url(flag_bkgd.png);
background-position: 50%;
background-repeat: no-repeat;
background-attachment: fixed;
}

a[href=\"http://delaware.gov/\"] em {
background: white;
top: 50px;
left: 0;
background-image: url(flag_bkgd.png);
background-position: 50%;
background-attachment: fixed;
}

Stretching

Setting Fonts with Ems
• “Default size in all browsers is 16 pixels”
• Multiply default size by 62.5%, you get 10px
• http://clagnut.com/blog/348/
• http://www.alistapart.com/articles/
howtosizetextincss/

body {
font-size: 62.5%;
margin: 10px 0 0 0;
padding: 0;
text-align: center;
}

Design
Fixed Flexible
Element
Flag Width 955px 95.5em
Stripe Height 50px 5em
Star Top 13px 1.3em
Star Left 90px 9em

Design
Fixed Flexible
Element
Union Height 440px 44em
Union Width 350px 35em

Design
X
Fixed Flexible
Element
Union Height 440px 44em
Union Width 350px 35em

#easel h1 a {
position: absolute;
width: 21.5em;
height: 17.5em;
background: #002868;
text-indent: -9999em;
margin: 0;
padding: 0;
z-index: 20;
background-image: url(flag_bkgd3.png);
background-position: 50%;
background-attachment: fixed;
}

OMG! Stars

i:after {
content: \"M\";
color: white;
font-size: 2em;
}

i:after {
content: \"\\48\"; // unicode
font-family: \"Zapf Dingbats\";
color: white;
font-size: 2.5em;
font-style: normal;
}

#1
Our Experience
Limits Our Designs
#2
Our Browsers
Limit Our Design

The CSS Summit
• Eight CSS experts:
• Molly Holzschlag, Stephanie Sullivan,
Kimberly Blessing, Dave McFarland, more
• Virtual conference
• CSS + Web fonts, IE6, jQuery, Flexible
Layouts, etc.
• July 18th, 9-5pm ET
• http://CSSSummit.com/

THANK YOU!
Christopher Schmitt
schmitt@heatvision.com
http://twitter.com/teleject
ChristopherSchmitt.com