7. The Case of the Single White Space
IN THIS CASE, WE’LL SEE HOW IMPORTANT IT IS TO be clear about exactly what you want in your rendered page, and how a seemingly benign single space can wreak havoc with a layout.
The Crime Scene
Nena Stefani’s jewelry business is really taking off. A self-proclaimed “Jane of all trades” and lover of all things creative, Nena learned web design and development in order to create her own website. However, she is stymied by the spacing problems that her page is giving her. She brings her code to the CSS Detective for help in identifying the sources of slightly off placement and spacing.
Initial snapshots
Nena’s design is clean and simple, and does a good job of incorporating all the features she needs, including links to the social media that have helped her build a name for herself (Figure 7.1).
Figure 7.1. Nena Adornments design comp
Unfortunately, Nena’s knowledge gaps have her stalled here (Figure 7.2).
Figure 7.2. Nena’s slightly off rendition
Follow the Evidence
Nena loves the challenge of learning new things that will enable her to express her limitless creativity. However, she tends to learn only the basics until she is pushed to increase her knowledge, an inclination that is proving to be the case with her CSS.
Identifying suspects
A big handmade arts show is coming up soon, and Nena planned on launching her website in time for it. All of her print collateral has the web address listed, and she wants to be sure that all of her marketing pieces are properly in place so that she can continue to grow her business. However, with her website development progress stalled, she worries that she won’t launch in time for the event.
What do you think my first inquiry is? Of course: check to see if she has validated her code. She assures me that as a novice developer, she relies heavily on both the HTML and CSS validators, and neither returned any errors. This fact has only heightened her level of frustration. “I can’t figure out what in the world could be wrong with it,” she says angrily. “There’s nothing wrong with the code!”
Mug shots
I have to admit I was impressed that Nena has given herself the small challenge of using XHTML and wants to adhere to standards-based design. While her initial document structure looks legitimate, I’m still skeptical as to her claim, so I validate the code myself just to rule out invalid code as the culprit in my own mind.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Nena Adornments</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="nena.ico" />
<style type="text/css">
body {
background-color: #fff;
color: #444;
font: 1em/1em Arial, sans-serif;
}
h1, h2, h3, h4 {
font-family: "Palatino Linotype", Georgia, "Times New Roman", serif;}
h1 {
background: transparent url(logo_
nenaadornments_updated.png) no-repeat 0 0;
height: 79px;
width: 223px;
text-indent: -9999px;
}
h1 a {
display: block;
height: 100%;
width: 100%;
}
h2 {
margin: 15px 0 20px 0;
padding: 0;}
h3 {
clear: both;
margin: 15px 0;
padding: 0;}
a {
color: #2A4D94;}
a img {
border: none;}
ul {
list-style-type: none;}
#latestlines img, #etsyphotobadge img {
border: 1px solid #ddd;
padding: 5px;
}
img.right {
border: 1px solid #ddd;
float: right;
margin-left: 20px;
padding: 5px;
}
.clearfix {display: inline-block;}
.clearfix:after {
clear: both;
content: ".";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
#wrapper {
font-size: .9em;
margin: 10px auto 0;
width: 990px;
}
#navigation {
background: transparent url(bg_navigation.jpg) left top no-repeat;
margin: 10px 0 0 0;
width: 992px;
overflow: hidden;
}
#mainnav {
background-color: #cdcdcf;
height: 59px;
line-height: 4.2em;
margin: 0 0 10px 20px;
text-align: center;
width: 664px;
float: left;
display: inline;
}
#mainnav li {
border-right: 1px solid #fff;
display: inline;
padding: 1.6em 1.95em;
}
#mainnav li.last {
border-right: none;}
#mainnav li a {
color: #fff;
font-weight: bold;
text-decoration: none;
}
#mainnav li a:hover {
text-decoration: underline;}
#search {
background-color: #2A4D94;
border-left: 1px solid #fff;
height: 29px;
padding: 3px 0 0 0;
width: 307px;
float: right;
}
input.textinput {
border: 1px solid #999;
margin: 0 8px 0 0;
}
input.submit {
color: #777;
font-size: .9em;
height: 24px;
}
#feed {
background-color: #678184;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
clear: right;
color: #eee;
float: right;
font-size: .85em;
height: 27px;
line-height: 1.8em;
width: 307px;
}
#feed img
{vertical-align: middle;}
#feed, #tagcloudtags, #earringlovephotos, #etsyphotobadge, #footer, form
{text-align: center;}
#maincontent, #etsy, #social, #newsletter
{border-bottom: 1px solid #ddd;}
#maincontent {
margin: 0;
padding: 0 0 45px 15px;
clear: both;
}
img.main {
margin-top: -30px;}
#newfeatures {
float: left;
padding: 0 5px 10px 15px;
width: 580px;
}
#newfeatures h4 {
line-height: .5em;
margin-top: 5px;
}
dl, dd, dt {
float: left;}
dl {
margin: 0 0 10px 0;}
dd {
margin: 0 0 0 15px;
width: 450px;
}
#earringlovephotos {
border: 1px solid #eee;
float: left;
margin: 0 15px 20px 0;
padding: 1px;
width: 110px;
}
li.spaced img {
margin-top: 4px;}
#sidebar {
border-left: 1px solid #ddd;
float: right;
margin: 0 0 0 5px;
padding: 0 15px 0 20px;
width: 340px;
}
#etsy, #sociallinks, #newsletter {
padding-bottom: 20px;}
#etsyphotobadge {
margin: 0 auto;
}
#etsyphotobadge li {
padding: 0 1px;
display: inline;}
#social {
overflow: hidden;
padding: 0 0 0 0;
}
* html #social {height: 1%;}
#social ul{
float: left;
width: 100px;}
#social ul li {
line-height: 20px;}
#social ul a {
text-decoration: none;}
#social ul a:hover, #tagcloud a:hover {
text-decoration: underline;}
#tagcloudtags {
border: 1px solid #ddd;
background-color: #eee;
margin: 0 0 20px 0;
padding: 0 5px 0;}
#tagcloud li {
float: left;
padding: 0 .3em 0 0;}
#tagcloud a {
line-height: 1.5em;
text-decoration: none;
}
.tclevel1 {font-size: .8em; font-weight: 200;}
.tclevel2 {font-size: .9em; font-weight: 300;}
.tclevel3 {font-size: 1em; font-weight: 400;}
.tclevel4 {font-size: 1.1em; font-weight: 500;}
.tclevel5 {font-size: 1.2em; font-weight: 600;}
.tclevel6 {font-size: 1.3em; font-weight: 700;}
.tclevel7 {font-size: 1.4em; font-weight: 800;}
.tclevel8 {font-size: 1.5em; font-weight: 900;}
#footer {
background: url(bg_footer.jpg) no-repeat;
clear: both;
color: #fff;
font-size: .75em;
height: 59px;
line-height: 5.5em;
width: 990px;
}
#footer a {
color: #777;}
</style>
</head>
<body>
<div id="wrapper">
<div id="head">
<h1><a href="#">Nena Adornments</a></h1>
</div><!-- end head -->
<div id="navigation">
<ul id="mainnav">
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Custom</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Learn</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
<form id="search" action="post">
<input type="text" size="30" class="textinput" /><input type="submit" value="Search" class="submit"/>
</form>
<p id="feed">get the feed! <a href="#"><img src="rss-blue16.png" alt="" /></a></p>
</div><!-- end navigation -->
<div id="maincontent">
<h2>Nena Adornments: For Every Body</h2>
<img class="right main" src="necklace_bigbrown.jpg" alt="Earth and Sky Necklace" />
<p>You can't resist the lure of a well-
porportioned pair of earrings that combines the earthiness of semi-precious stones mixed with the clean lines of contemporary design, can you? Nor the comforting weight of a necklace of artfully combined antique African trade beads, nor deftly paired silver and sand-burnished glass. If this is true, then Nena Adornments are made for you.</p>
<p>For everybody who wants to adorn them selves with beautiful, thoughtful, and masterfully crafted jewelry that delights and inspires, Nena Adornments provides exactly what you are looking for.</p>
<p>Delve deeper into the world of Nena Adornments to see just how this particular blend of eclectic jewelry artistry came into being... <a href="#">More</a></p>
</div><!-- end maincontent -->
<div id="newfeatures">
<h2>What's New </h2>
<div id="latestlines">
<h3>Latest Lines</h3>
<dl>
<dt><img src="sm_earrings_greenglass.jpg" alt="" /></dt>
<dd><h4>Washed Ashore</h4>
<p>The meeting of sand and water produces beautiful treasures of seaglass for us to appreciate. What better way to enjoy them than to incorporate them into adornments? See Nena's latest tribute to mother nature's cleverness... <a href="#">More</a></p>
</dd>
</dl>
<dl>
<dt><img src="sm_earrings_grapesofbliss.jpg" alt="" /></dt>
<dd><h4>Grapes of Bliss</h4>
<p>The new Midi line evokes images of Southern France: fields of lavender, bunches of ripe juicy grapes hanging from the vine, the richness of Burgundy and Bordeaux, the azure of the Mediterranean sky. If only we could add scent... <a href="#">More</a></p>
</dd>
</dl>
</div><!-- end latestlines -->
<div id="orgnews">
<h3>EarringLove.org Shows Some Love</h3>
<ul id="earringlovephotos">
<li><img src="logo_earringlove.png" alt="" /></li>
<li><img src="earringlove2.jpg" alt="" /></li>
<li class="spaced"><img src="earringlove1.jpg" alt="" /></li>
<li><img src="logo_earringlovesyou.png" alt="" /></li>
</ul>
<p>Our charitable organization, EarringLove.org, was created to spread beauty and goodwill in the world by committing random acts of handmade jewelry kindness. Now you can rely upon the kindness of strangers -- for earrings!</p>
<p>How it works: if you ever see Nena with a pair of earrings that you like, just say the magic words (and no, the magic words are not “the magic words”), and she will give you the earrings -- just like that! So far, she has given away more than 30 pairs of earrings to lucky women (and some men) all over the country. Next stop: the world! (You think we're kidding? We'll be in Brazil for the new year! Seriously! EarringLove and samba will make a great pair!)</p>
<p>Want to spread some love of the earring ilk? <a href="#">See how you can get involved!</a></p>
</div><!-- end orgnews -->
<div id="multimedia">
<h3>Video Tutorial: Effortless Elegance</h3>
<img src="video.jpg" class="right" alt="" />
<p> Not quite sure how to work that newest fabulous piece? Can't quite figure what to pair with what? You're not alone. Sometimes trying to find your own signature style takes time.</p>
<p>The latest Nena video demonstrates how to set your jewelry off and mix and match for the best effect. Get some new ideas -- and if you have some to share, add them through the comments!</p>
</div><!-- end multimedia -->
</div><!-- end newfeatures -->
<div id="sidebar">
<h2>Nothing but Nena</h2>
<div id="etsy">
<h3>Etsy Nena</h3>
<p>At the Nena Etsy store, you can get just about everything you want. And you can be social while shopping, right from the comfort of your own home.</p>
<ul id="etsyphotobadge">
<li><img src="th_etsy.jpg" alt="" /></li>
<li><img src="th_tealglass.jpg" alt="" /></li>
<li><img src="th_earrings_hanging.jpg" alt="" /></li>
<li><img src="th_blueeggs.jpg" alt="" /></li>
</ul>
</div><!-- end etsy -->
<div id="social" class="clearfix">
<h3>Social Nena</h3>
<p>We know it's not possible to get enough of Nena, so here are all the other spaces you can find Nena on the interwebs:</p>
<ul>
<li class="col1"><a href="#"><img src="flickr_16.png" alt="link to Nena on flickr" /></a> <a href="#">flickr</a></li>
<li class="col1"><a href="#"><img src="twitter_16.png" alt="link to Nena on twitter" /></a> <a href="#">twitter</a></li>
<li class="col1"><a href="#"><img src="friendfeed_16.png" alt="link to Nena on friendfeed" /></a> <a href="#">friendfeed</a></li>
<li class="col1"><a href="#"><img src="facebook_16.png" alt="link to Nena on facebook" /></a> <a href="#">facebook</a></li>
</ul>
<ul>
<li class="col2"><a href="#"><img src="linkedin_16.png" alt="link to Nena on linkedin" /></a> <a href="#">linkedin</a></li>
<li class="col2"><a href="#"><img src="dopplr_16.png" alt="link to Nena on dopplr" /></a> <a href="#">dopplr</a></li>
<li class="col2"><a href="#"><img src="youtube_16.png" alt="link to Nena on youtube" /></a> <a href="#">youtube</a></li>
<li class="col2"><a href="#"><img src="yelp_16.png" alt="link to Nena on yelp" /></a> <a href="#">yelp</a></li>
</ul>
</div><!-- end sociallinks -->
<div id="newsletter">
<h3>Newsletter Nena</h3>
<p>Sign up for our newsletter to get information on new releases, upcoming events, and sales.</p>
<p>Enter your email address below:</p>
<form action="post">
<input type="text" size="30" class="textinput" /><input type="submit" value="Sign me up!" class="submit" />
</form>
</div><!-- end newsletter -->
<div id="tagcloud">
<h3>Tagged Nena</h3>
<ul id="tagcloudtags" class="clearfix">
<li class="tclevel3"><a href="#">necklaces</a></li>
<li class="tclevel7"><a href="#">semi-precious stones</a></li>
<li class="tclevel2"><a href="#">peridot</a></li>
<li class="tclevel1"><a href="#">rings</a></li>
<li class="tclevel8"><a href="#">earrings</a></li>
<li class="tclevel4"><a href="#">matching sets</a></li>
<li class="tclevel2"><a href="#">amethyst</a></li>
<li class="tclevel3"><a href="#">lapis lazuli</a></li>
<li class="tclevel5"><a href="#">earringlove</a></li>
<li class="tclevel2"><a href="#">precious stones</a></li>
<li class="tclevel7"><a href="#">beads</a></li>
<li class="tclevel4"><a href="#">African trade beads</a></li>
<li class="tclevel1"><a href="#">matching sets</a></li>
<li class="tclevel3"><a href="#">bound</a></li>
<li class="tclevel8"><a href="#">silver</a></li>
<li class="tclevel2"><a href="#">form</a></li>
<li class="tclevel2"><a href="#">bracelets</a></li>
<li class="tclevel1"><a href="#">sale</a></li>
<li class="tclevel7"><a href="#">custom</a></li>
<li class="tclevel4"><a href="#">garnet</a></li>
<li class="tclevel1"><a href="#">gold</a></li>
</ul>
</div><!-- end tagcloud -->
</div><!-- end sidebar -->
<div id="footer">
copyright © nena adornments 2010 | website design by <a href="#">farfallaeffect design</a>
</div><!-- end footer -->
</div><!-- end wrapper -->
</body>
</html>
The Evidence Never Lies
To my eye, both Nena’s XHTML and CSS looked really solid from the standpoint of well-formed markup, and the validation results confirmed this as well. And, true to Nena’s emphatic testimony, neither validation produced any errors.
“I may not know everything about coding,” Nena admitted, “but what I do know, I know well.”
Here is the validation report for the XHTML markup (Figure 7.3).
This document was successfully checked as XHTML 1.0 Transitional!
Figure 7.3. Nena Adornments’ XHTML validation results
And here is the report for the CSS (Figure 7.4).
Congratulations! No Error Found.
Figure 7.4. Nena Adornments’ CSS validation results
Confirming suspicions and naming the culprit
The case was turning out to be a little trickier than I had expected. Obviously, the validators weren’t going to shine any light on the problems, so now we have to roll up our sleeves and take a much closer look at the code.
Has anything jumped out at you? One item that caught my eye was the absence of margins and padding on some of the layout elements that were having spacing problems. Nena was conscientious about using margins and padding where she needed a value. However, she may not have known (or remembered) that the browser will supply its own values for margins and padding on an element if the author does not.
Here’s what I suggest for our first approach to fixing Nena’s spacing problems. Let’s make the lack of margins and padding explicit where they currently are not, starting with the most glaringly obvious problems.
Right at the top of the page, the search and RSS feed boxes aren’t at all where they are supposed to be, and the alignment for the links in the navigation bar seems to be a little off, doesn’t it (Figure 7.5)?
Figure 7.5. Nena Adornments’ problem RSS feed box and navigation bar
Both #search and #feed are floated right, and #mainnav is floated left. There should be enough room for both of them, so I suspect this misplacement is due to float drop caused by one element being wider than it should be.
An examination of the #mainnav styles confirms my suspicions. While there are multiple style declarations for the #mainnav element, and even margin values, the padding values are conspicuously absent. Remember that browsers give ordered and unordered lists padding by default, and that the padding may differ from browser to browser.
#mainnav {
background-color: #cdcdcf;
height: 59px;
line-height: 4.2em;
margin: 0 0 10px 20px;
text-align: center;
width: 664px;
float: left;
display: inline;
}
As a fix, let’s set the padding to 0 to effect the desired change:
#mainnav {
background-color: #cdcdcf;
height: 59px;
line-height: 4.2em;
margin: 0 0 10px 20px;
padding: 0;
text-align: center;
width: 664px;
float: left;
display: inline;
}
Aha! This takes care of the float drop issue (Figure 7.6).
Figure 7.6. Tremendous improvement, but still work to be done
I think we are on to something here, don’t you? Let’s see if we can use the same approach with the out-of-place RSS box.
In the styles for the #feed element, this is what Nena has:
#feed {
background-color: #678184;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
clear: right;
color: #eee;
float: right;
font-size: .85em;
height: 27px;
line-height: 1.8em;
width: 307px;
}
Hmmm. Do you see any margin or padding values declared? Nope, I don’t either. From this code alone, you would think that everything would be fine, but often when using positioning on elements, it is better to err on the side of caution and explicitly declare the element’s margin, at the very least. Margin is particularly relevant in this situation because the problem has to do with the box’s relationship with the elements around it, as opposed to the elements inside of it (which would lend itself more to looking at the padding). Just a small addition should do the trick:
#feed {
background-color: #678184;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
clear: right;
color: #eee;
float: right;
font-size: .85em;
height: 27px;
line-height: 1.8em;
margin: 0;
width: 307px;
}
Eureka! This seems to put the RSS box in the place that Nena intended (Figure 7.7).
Figure 7.7. The RSS feed bar is in its proper place, and the navigation is much-improved.
Now, on to the out-of-place photos in the sidebar (Figure 7.8).
Figure 7.8. Off-kilter Etsy photo badge
Heartened that my hunch about the margin and padding has paid off so far, I suggest we continue looking in the styles of the area in question for absent explicit margin and padding declarations. Here’s what we find:
#etsyphotobadge {
margin: 0 auto;}
Yep, again there is no explicit margin or padding on an unordered list. Because the problem seems to be more about size than the box’s relationship with the elements around it, I decide to make it clear that no padding is wanted within that element box:
#etsyphotobadge {
margin: 0 auto;
padding: 0;
}
This fix did the trick (Figure 7.9)!
Figure 7.9. Fixed Etsy photos!
We’re pulling into the home stretch, but my client, with her discerning design eye, sees that we are not quite there yet.
Nena points out that the spacing is still off on the page itself, notably on the top of the page with the logo (Figure 7.10), and then at the bottom of the page with the footer (Figure 7.11), and the alignment of the navigation links isn’t quite right.
Figure 7.10. Too much between the logo and the top of the page and nav bar
Figure 7.11. Hey! That space isn’t supposed to be there!
These points warrant a final look at the CSS, and a potential delving into the HTML markup.
What do you think we will find when we look at the code once again? You guessed it: right in front of our faces, the declarations for body are missing an explicit margin value. Let’s put it in now:
body {
background-color: #fff;
color: #444;
font: 1em/1em Arial, sans-serif;
margin: 0;
}
Nena smiles. The footer is flush with the bottom of the page, just as she intended in her original design.
As for the extra space for the header, similarly, we make this addition:
h1 {
background: transparent url(logo_nenaadornments_updated.png) no-repeat 0 0;
height: 79px;
margin: 0;
width: 223px;
text-indent: -9999px;
}
Now the site logo is the proper amount of space from the top.
The last mystery to solve is that of the navigation links (Figure 7.12).
Figure 7.12. Just slightly off, but enough to notice the difference.
This issue is especially puzzling, given that we have already fixed the spacing styles for the #mainnav section. What else could cause the spacing to be off? Then the answer comes to me: the list white-space bug! I go to the HTML code to see if I am correct, and sure enough, we find this:
<ul id="mainnav">
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Custom</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Learn</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
I was hoping that the newer versions of browsers wouldn’t still have this problem, but apparently they still do. The speediest fix is inelegant but effective: remove all the white space from in-between the list items. To wit:
<ul id="mainnav">
<li><a href="#">About</a></li><li><a href="#">Products</a></
li><li><a href="#">Custom</a></li><li><a href="#">Events</a></li><li><a href="#">Learn</a></li><li class="last"><a href="#">Contact</a></li>
</ul>
Once this is done, Nena and I celebrate—the page is completely fixed, and it looks exactly the way she wanted it to.
Case Closed!
Nena’s case wasn’t as cut and dried as finding misspellings and incorrect punctuation. With no validation errors, we have to understand more of the issues that cause spacing errors. You can begin to see just how insidious the browser’s default styles can be and how important it is to make explicit the values that you need—particularly when it comes to margins, which affect the relationship of an element with its neighbors; and padding, which often affects an element’s rendered size.
Additionally, we uncovered a surprise problem of the list white-space bug, which seems insignificant but can have unwanted effects on your page design.
In terms of process, if there are no validation errors, look for fixes in the CSS first. As always, start from the top of the page and with the most heinous problem, and then work your way down. Remember to solve only one problem at a time and see how that fix may affect anything else on the page. Once you can see the change in the fixed area, then you can move on to the next problem area.
Finally, after you have made all of the fixes that you can to the CSS declarations, look for any remaining issues in the markup itself.
Well done—another rousing success! But a CSS Detective’s work is never done. Now, on to The Case of the Mistaken Identity!