From the book
Follow the Evidence
Follow the Evidence
Harry is a closet procrastinator. He waited until the 11th hour to start on the coding, thinking it would be easy, given the simplicity of the design. But the developed page is due this afternoon, and his fatigue from late-night hours and growing anxiety leave him unable to decipher the cause of the problems in the page.
Identifying suspicious characters
I listen carefully to Harry, who, despite his fatigue, is talking a mile a minute, pausing only long enough to burn his mouth with too-hot coffee. The first thing I wonder is whether he has validated the page. As you know, validation is one of the most important tools in our detective toolkit, because it's so useful for showing the small but important details that one can miss—especially when in a hurry. Validating both markup and CSS should be the first practice in solving any coding mystery.
Mug shots
Harry’s page code seems benign on first glance. He is using an HTML 4.01 strict doctype, and he has the correct syntax for the style tag. But something is askew:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>FarfallaEffect Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color: #ffcc66;
border-top: 5px solid #C0272D;
border-bottom: 5px solid #C0272D;
color: #444444;
font-family: Arial, "Trebuchet MS", sans-serif;
font-size: 1em;
margin: 0;
padding: 0;
}
h1, h2, h3 {font-family: Cambria, serif;}
h2 {color: #96222A;}
#logo {
position: relative
top: 0;
left: -33px;
}
#tagline {
color: #BF4B1D;
font-size: .8em;
margin: -13px 0 0 28;
}
h3, #blogteaser h3 a {color: #D85623;}
container {
background-color: #ffffff;
border-left: 1px solid #aaaaaa;
font-size: .9em;
margin: 0 auto;
padding: 10px 1px 0 1px;
text-align: left;
width: 900px;
}
#container h1 {
color: #ffffff;
display: none;
font-size: 1px;
margin: 0;
}
#navigation {
border-bottom: 1px solid #aaaaaa;
font-size: 1.1em;
margin: 5px 0 15px 0;
padding: 0 0 6px 0;
text-align: right;
width: 899px;
}
#navigation li {
display: inline;
list-style-type: none;
}
#navigation a {
color: #BC4622;
font-weight: bold;
margin: 0 40px;
text-decoration: none;
}
li.current a, #navigation a:hover {
border-bottom: 5px solid #C0272D;
font-weight: bold;
padding-bottom: 2px;
}
#mainbody {
border-right: 1px dotted #aaaaaa;
float: left;
margin-bottom: 15px;
padding: 0 10px 30px 15px;
width: 250px;
}
#introcontent {
margin-bottom: 50px;
}
.readmore a {
color: #990022;
float: right;
font-size: .9em;
text-decoration: none;
}
#blogteaser {
border-top: 1px dotted #aaaaaa;
margin-top: 10px;
}
.postinfo {
color: #aaaaaa;
font-size: .70em;
line-height: .5em;
}
.postinfo a {
color: #777777;
text-decoration: none;
} ·
#recentprojects {
float: right;
margin: 0 0 10px 0;
width: 600px;
}
#recentprojects h3 {clear: both;}
#recentprojects img {border: 1px solid Â#aaaaaa;}
dl.projects {
float: lefr;
margin: 0 10px 10px 10px;
text-align: center;
width: 260px;
}
dl.projects dd {
font-size: .8em;
margin: 0;
padding: 5px 10px;
text-align: left;
}
#footer {
clear: both;
border-top: 1px solid #aaaaaa;
font-size: .9em;
overflow: hidden;
padding: 0 0 0 15px;
}
#footer div {
float: left;
margin: 0;
padding: 0 0 10px 0;
}
#contactinfo, #sociallinks {width: 350px;}
#sociallinks img {
border: 0;
vertical-align: middle;
}
#sociallinks a {
color: #990022;
text-decoration: none;
}
#footerlogo {text-align: center;}
#footerlogo img {margin-top: 10px;}
</style>
</head>
<body>
<div id="container">
<div id="logo">
<img src="logo_farfallaeffect_serif_alt.png"
alt="logo">
</div>
<h1>farfalle design</h1>
<h2 id="tagline">inspired transformation.</h2>
<ul id="navigation">
<li class="current"><a href="#">home </a></li>
<li><a href="#">about</a></li>
<li><a href="#">projects</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
<div id="mainbody">
<div id="introcontent">
<h2>about us</h2>
<h3>Big Change<br>
<span class="">from Subtle Motions</span>
</h3>
<p>If an action as subtle as the flap of a butterfly's wings can change
the weather patterns on the other side of the world, imagine what
focused attention and deliberate action from passionate web design
professionals can do for your website. <span class="readmore"><a href="#">
read more >></a></span></p>
</div><!--end introcontent -->
<div id="blogteaser">
<h2>from the blog</h2>
<h3><a href="#">Spreading Our Wings</a></h3>
<p class="postinfo">Posted <a href="#"> 23 November</a> by <cite>
<a href="#">Renee</a></cite></p>
<p>With our recent growth, our old office was feeling like a cocoon, so
we decided it was time to break out and find new digs...
<span class="readmore"><a href="#">read more >></a></span></p>
</div><!--end blogteaser -->
</div><!--end mainbody -->
<div id="recentprojects">
<h2>recent projects</h2>
<h3>websites</h3>
<dl class="projects">
<dt><img src="example1-1.gif" alt=""> </dt>
<dd><strong>Tendrils, fronds, flowers and fruit:</strong> A redesigned
website showcases how Brentii Landscape Design is going wild with organics.
<span class="readmore"><a href="#"> read more >></a></span></dd>
</dl>
<dl class="projects">
<dt><img src="example1-2.gif" alt=""></dt>
<dd><strong>Brush strokes:</strong> M. Weinberg Art produces eco-
friendly tiles for a public art installation and lays the
foundation for something big.
<span class="readmore"><a href="#"> read more >></a></span></dd>
</dl>
<h3>logos</h3>
<dl class="projects">
<dt><img src="example1-3.gif" alt=""> </dt>
<dd><strong>Cleaning up:</strong> Botani Handmade Soaps' new logo
takes them from down and dirty to clean and crisp.
<span class="readmore"><a href="#"> read more >></a></span></dd>
</dl>
<dl class="projects">
<dt><img src="example1-4.gif" alt=""> </dt>
<dd><strong>Small Bites:</strong> Thali Chota Bistro's new branding
effort gives local foodies a taste of things to come.
<span class="readmore"><a href="#">read more >></a></span></dd>
</dl>
</div><!--end recentprojects-->
<div id="footer">
<div id="contactinfo">
<h3>get in touch</h3>
<p><strong>email:</strong> flutter@farfalladesign.com</p>
<p><strong>phone:</strong> +1 111.222.3333</p>
</div><!--end contactinfo-->
<div id="sociallinks">
<h3>be social</h3>
<p><a href="#"><img src="twitter_16.png"
alt=""></a> <a href="#">twitter.ific</a></p> ·
<p><a href="#"><img src="facebook_16.png"
alt=""></a> <a href="#">fan.tastic</a></p>
</div><!--end sociallinks-->
<div id="footerlogo">
<img src="farfalle_bf.png" alt="logo"
</div><!--end footerlogo-->
</div><!--end footer-->
</div><!--end container-->
</body>
</html>