6. The Case of the Mistaken Identity

IN THIS CASE, WE’LL ANSWER THE AGE-OLD question “What’s in a name?” and see just how important it is to know exactly who’s who.

The Crime Scene

Zimma Studios, while great at designing websites, does not have the resources to do any major programming. They hire Bob Cobb to do both the front-end and back-end development for their client’s foodie blog and community, EateryJunkie.com. Bob is mainly a back-end developer who specializes in Java and doesn’t really deal with HTML and CSS much anymore unless he has to. Ironically, he is a bit of a know-it-all despite being a little rusty.

During the development process, Bob has run into problems. He swallows his pride and discreetly turns to the CSS Detective for a fresh set of eyes and solutions to his layout problems.

Initial snapshots

Like many back-end programmers, Bob is less interested in the design and more compelled by how the functionality will be achieved. However, he knows that he does need to make the site look like the design given to him (Figure 6.1). But from the results of his first attempt, you can see why he seeks assistance (Figure 6.2).

Figure 6.1. The EateryJunkie design comp

image

Figure 6.2. Not quite what we are shooting for

image

Follow the Evidence

I notice that Bob avoids eye contact, so I guess he is a bit ruffled by having to ask for help. He hides his discomfort with bluster: “I’ve been doing stuff on the web for years,” he says smugly, “probably way before you got started with it. Once you learn HTML and CSS, there’s really not a lot more to it. That’s why I got into the back end.”

Identifying suspects

Bob’s demeanor tells me that while he may know actual programming well, he’s overconfident about his CSS coding. I suspect that he didn’t validate because he didn’t think he needed to.

Mug shots

I’m not surprised that as a developer, Bob has gone for using a strict doctype. A preliminary review of the code shows this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>EateryJunkie - Get your eatery on!</title>
<link rel="shortcut icon" type="image/x-icon" href="eatery_junkie.ico" />
<style type="text/css">
body {
background-color: #D1000E;
color: #535353;
font: .95em/1em Arial, sans-serif;
margin: 0;
}

h2, h3, h4, #sitenav {
font-face: Courier New, monospace;}

a {
color: #F2F2F2;
text-decoration: none;
}

a:hover {
text-decoration: underline;}

a img {
border: none;}

ul {
list-style-type: none;}

input {
margin: 0 5px 5px 0;}

.styled {
font-style: italic;}

.morelink {
text-align: right;}

#pagehead, #sitenav li, #pagebody, #recentposts, #recentcomments, #recenttweets, #sideimage, #feed, #subscription, #community, #recipe, #social {
border-bottom: 2px solid #FFF4ED;}
#sitesearch, #postlist, #subscription p, #subscription form, #community p.members, #community ul, #recipe ul, #pagefoot {
text-align: center;}
#recentscolumn, #blogessentials {
font-size: .75em;}

#pagewrapper {
background-color: #FFF;
border-top: 1px solid #FFF4ED;
border-right: 2px solid #FFF4ED;
border-bottom: 1px solid #FFF4ED;
border-left: 2px solid #FFF4ED;
margin: 0 auto;
width: 979px;
}

  #pagewrapper div {
  over-flow: hidden;}

#pagehead {
background: transparent url(bg_head.jpg) 178px 0 no-repeat;}
  #pagehead h1 {
  background: #F9ECD4 url(logo_eateryjunkie.png) middle middle no-repeat;
  border-right: 2px solid #FFF4ED;
  float: left;
  height:200px;
  margin: 0;
  text-indent: -9999px;
  width:189px;
  }

  #pagehead a {
  display: block;
  height: 100%;
  width: 100%;
  }

  #sitenav {
  background-color: #CC0000;
  border-left: 2px solid #FFF4ED;

  float: right;
  margin: 0;
  padding: 0;
  height: 200px;
  width: 250px;
  }

    #sitenav li {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.7em;
    padding-left: 8px;
    height: 15%;
    width: 100%;
    }

       #sitenav li.about {
       background-color: #660000;}
       #sitenav li.reviews {
       background-color: #9E0F13;}
       #sitenav li.recipes {
       background-color: #BE0E10;}
       #sitenav li.community {
       background-color: #D1000E;}
       #sitenav li.contact {
       background-color: #E82C0C;}
       #sitenav li.last {
       border-bottom: none;}
    #sitenav a {
    color: #FFF4ED;}

       #sitenav a:hover {
       font-style: italic;
       text-decoration: none;
       }

  #searchsite {
  background-color: #482C21;
  border-top: 2px solid #FFF4ED;
  clear: right;
  float: right;
  height: 40px;
  margin: -42px 0 0 0;
  width: 250px;
  }

    #searchsite p {
    margin: 8px 0 0 0;}

#pagebody {
background: transparent url(bg_fauxcolumns.gif) 0 0 repeat-y;
clear: both;}
  #contentcolumn {
  float: left;
  line-height: 1.4em;
  margin: 0;
  width: 477px;}

       #contentcolumn a {
       color: #7E5E45; }

       #contentcolumn .morelink {
       font-size: .8em;}

  #featuredpost {
  padding: 0 15px 0;}

    #featuredpost h2 {
    background: #FFF url(title_latestpost.png) 0 0 no-repeat;
    height: 44px;
    text-indent: -9999px;
    width: 137px;
    }

    #featuredpost h3 {
    border-bottom: 1px dotted #A15825;
    font-face: Georgia, serif;
    line-height: 1.3em;
    }

    #featuredpost p a {
    text-decoration: underline;}
    #postinfo, #imagecaption {
    font-size: .7em;}
    #blogphoto {
    border: 1px solid #7E5E45;

    margin: 5px auto;
    padding: 5px;
    width: 400px;
    }

    #catstags {
    background-color: #F9ECD4;
    border: 2px solid #edd0b2;
    font-size: .76em;
    line-height: .75em;
    padding: 2px 8px;
    }

    #catstags p {
    margin: 10px 0;
    padding: 0;
    }

  #recentscolumn {
  background-color: #7E5E45;
  color: #FFF4ED;
  float: left;
  width: 250px;
  margin: 0;
  }

    #recentscolumn a {
    color: #FFF;}

    #recentscolumn ul {
    margin: 10px 15px 10px;
    padding: 0;
    }

    #recentscolumn li {
    margin: 0 0 .8em 0;}

    #recentscolumn h3 {
    color: #FFF4ED;
    margin: 0;
    }

       h3.posts {
       background: transparent url(title_recentpost.png) 0 0 no-repeat;
       height: 35px;
       text-indent: -9999px;
       width: 113px;
       }

       h3.comment {
       background: transparent url(title_recentcomment.png) 0 0 no-repeat;
       height: 29px;
       text-indent: -9999px;
       width: 131px;
       }

       h3.tweet {
       background: transparent url(title_recenttweet.png) 0 0 no-repeat;
       height: 28px;
       text-indent: -9999px;
       width: 107px;
       }

       h3.pic {
       background: transparent url(title_recentpic.png) 0 0 no-repeat;
       height: 36px;
       text-indent: -9999px;
       width: 93px;
       }

    #recentposts, #recentcomments, #recenttweets, #recentpics {
    padding: 8px 10px;
    }

    #recentpics {}

       #recentpics ul {
       margin: 10px auto 10px;
       over-flow: auto;
       width: 156px;
       }

       #recentpics li {
       float: left;

       margin: 0;
       width: 74px;
       }

       #recentpics img {
       border: 2px solid #FFF4ED;
       margin: 0;
       }

       #recentpics li.left {
       margin-right: 8px;}

       #recentpics li.top {
       margin-bottom: 4px;}

  #blogessentials {
  background-color: #482C21;
  color: #FFF4ED;
  float: left;
  line-height: 1.2em;
  margin: 0 0 0 2px;
  width: 250px;
  }

    #feed, #subscription, #social, #recipe, #community, #blogroll {
    padding: 8px 10px;
    }

    #blogessentials img {
    margin-right: 5px;
    valign: middle;
    }

    #blogessentials p {
    margin-top: 0;}

    #blogessentials ul {
    margin: 0;
    padding: 0;
    }

      #blogessentials li {
      line-height: 2em;
      padding: 0 0 0 12px;
      }

      #blogessentials h4 {
      color: #FFF4ED;
      margin: 0;
      }

        h4.feed {
        background: transparent url(title_junkiefeed.png) 0 0 no-repeat;
        height: 32px;
        text-indent: -9999px;
        width: 101px;
        }

        h4.subscription {
        background: transparent url(title_junkiesubscribe.png) 0 0 no-repeat;
        height: 32px;
        text-indent: -9999px;
        width: 147px;
        }

        h4.community {
        background: transparent url(title_junkiecommunity.png) 0 0 no-repeat;
        height: 33px;
        text-indent: -9999px;
        width: 123px;
        }

        h4.recipe {
        background: transparent url(title_junkierecipe.png) 0 0 no-repeat;
        height: 32px;
        text-indent: -9999px;
        width: 97px;
        }

        h4.social {
        background: transparent url(title_junkiesocial.png) 0 0 no-repeat;

        height: 32px;
        text-indent: -9999px;
        width: 98px;
        }

        h4.blogroll {
        background: transparent url(title_junkieblogs.png) 0 0 no-repeat;
        height: 32px;
        text-indent: -9999px;
        width: 114px;
        }

     #sideimage {
     background: url(img_side.jpg) no-repeat 0px 0;
     height: 375px;
     width: 250px;
     }

     #feed p {
     margin: 5px 0;
     padding: 0 12px;
     }

     #community {}
       #community ul {
       margin: 5px auto 10px;
       over-flow: hidden;
       width: 225px;
       }

       #community li {
       float: left;
       margin: 0 8px 0 0;
       padding: 0;
       width: 50px;
       }

       #community img {
       border: 1px solid #FFF4ED;
       margin: 0;
       width: 48px;
       }

       #community li.right {
       margin-right: 0;}
       #community li.top {
       margin-bottom: 4px;}
#pagefoot {
background-color: #999;
clear: both;
font-size: .70em;
line-height: 1.1em;
padding: 8px 0;
}

/* IE6 compensation */
* html #pagehead {height: 1%;}
* html #sitenav {width: 242px;}
* html #sitesearch {height: 44px;}
* html #community li {margin: 0 7px 0 0;}
* html #sociallinks img {margin-bottom: 5px;}

</style>
</head>
<body>
<div id="pagewrapper">
  <div id="pagehead">
    <h1><a href="#">Eatery<span
class="styled">Junkie</span></a></h1>
    <ul id="sitenav">
      <li class="about"><a href="#">about</a></li>
      <li class="reviews"><a href="#">reviews</a></li>
      <li class="recipes"><a href="#">recipes</a></li>
      <li class="community"><a href="#">community</a></li>
      <li class="contact last"><a href="#">contact</a></li>
    </ul>
    <div id="sitesearch">
      <form id="search" action="post">

      <p><input type="text" size="23" class="textinput" /><input type="submit" value="search" class="submit"/></p>
      </form>
    </div><!-- end sitesearch -->
  </div><!-- end pagehead -->
<div id="pagebody">
   <div id="contentcolumn">
      <div id="featuredpost">
        <h2 class="latestpost">Latest Post</h2>
        <h3><a href="#">We like it raw (and cooked, and everything in-between)</a></h3>
        <div class="blogphoto"><img src="main_blogphoto.jpg" alt="" />
      <p class="imagecaption">Raw foods goodness abounds at Cafe Gratitude.</p>
      </div>
      <p>Two years ago, my friend <a href="#">Ambalinn</a> toyed with the idea of going completely raw, In solidarity and out of curiosity, I decided to try it myself for one month. My friend adapted and blossomed into a gourmet rawist seemingly overnight. In stark contrast, I found that my partial interest and demanding work schedule meant that I ate a lot of salads (when not sampling my friend's amazing and delicious concoctions, which wasn't often enough). At the end of the month, I went back to eating cooked foods, as I missed the warmth as well as the comfort of making things that were familiar.</p>
      <p>However, the endeavor did leave me with a deeper appreciation for raw foods and with an expanded repertoire of food preparation techniques (you wouldn't think that "massaging" greens would make them taste better, but it does). Now when I am out in my travels, sampling eateries all around the world, I can't help but stop in at raw restaurants and see what they have up their sleeves.</p>
      <p>A recent trip to San Francisco gave me the opportunity to try out <a href="#">Cafe Gratitude</a>. I have their (un)cookbook, <a href="#">I Am Grateful</a>, and I have been loving most of the recipes from it, especially the desserts. I ordered the "I Am Abundant" sampler platter to try a little of everything: sprouted almond hummus, Asian kale–sea vegetable salad, hemp-seed pesto crostini, spicy cashew nacho cheese with flax chips, olive tapenade, buckwheat crackers, spring roll, and mini house soup.</p>
      <p> Before I give my impressions, I must confess to having a bad habit of comparing all raw foods with those of Ms. Ambalinn, as she has developed a style that is flavorful without "cheating" (relying on fats, oils, and overspicing), and instead produces simple combinations with basic ingredients to let the flavors of the food itself sing through the dish.</p>

      <p>Having said that, here was my take on Cafe Gratitude: overall, each item was good, but did seem to be much stronger flavor-wise than necessary. That didn't stop me from finishing everything, though, and it certainly did not stop me from ordering dessert. Ah, dessert. I went with the pear-ginger "cheesecake," which was so incredibly delicious that I still think about it to this day.</p>
      <p>So, if you are in the Bay Area and are curious about raw foods, make an effort to stop by Cafe Gratitude. You will be pleased that you did.</p>
   <p class="postinfo">Posted <a href="#">18 June</a> by <cite><a href="#">Bonita</a></cite></p>
      <div id="catstags">
      <p>filed under: <a href="#">reviews</a></p>
      <p>tagged with: <a href="#">raw foods</a>, <a href="#">restaurants</a>, <a href="#">San Francisco</a>, <a href="#">healthy eating</a></p>
      <p>comments: <a href="#">(10)</a></p>
      </div><!-- end catstags -->
      <p class="morelink"><a href="#">previous posts &gt;&gt;</a></p>
   </div><!-- end featuredpost -->
</div><!-- end contentcolumn -->
<div id="recentscolumn">
     <div id="recentposts">
     <h3 class="posts">recent posts</h3>
     <ul id="postlist">
        <li><a href="#">What goes on at Vintner's Grill, stays...</a></li>
        <li><a href="#">Brenda's breakfast breakdance</a></li>
        <li><a href="#">Amsterdam was cold, but the poffertjes were warm and crisp</a></li>
        <li><a href="#">Me, you, and the exotic spiced halibut</a></li>
        <li><a href="#">Sweet potato biscuits and other products of garden bounty</a></li>
        <li><a href="#">On a lark at Meadowlark</a></li>
     </ul>
     <p class="morelink"><a href="#">More posts &gt;</a></p>
     </div><!-- end recentposts -->
     <div id="recentcomments">
     <h3 class="comment">recent comments</h3>
     <ul id="commentlist">
       <li><a href="#">Natalie</a> commented on<br />
       <a href="#">We like it raw (and cooked, and everything in between)</a> March 1</li>
       <li><a href="#">Amber</a> commented on<br />
       <a href="#">Brenda's breakfast breakdance</a> January 19</li>
       <li><a href="#">Deloria</a> commented on<br />
       <a href="#">What goes on at Vintner's Grill, stays...</a> January 18</li>
       <li><a href="#">Andrew</a> commented on<br />
       <a href="#">Amsterdam was cold, but the poffertjes were warm and crisp</a> December 28</li>
       <li><a href="#">Christine</a> commented on<br />
       <a href="#">Me, you, and the exotic spiced halibut</a> December 5</li>
    </ul>

    <p class="morelink"><a href="#">More comments &gt;</a></p>
    </div><!-- end recentposts -->
    <div id="recenttweets">
    <h3 class="tweet">recent tweets</h3>
    <ul id="tweetlist">
      <li>OH: "it's like a little man with a sweet potato outfit is breakdancing on my tongue!" with @tungstenrs <a href="#">on 21 January</a></li>
      <li>Ahhh. Finally sitting down to a nice dinner at Michael's. Still my favorite place in town. <a href="#">17 January</a></li>
      <li>The Winds never disappoints: pear poached in spiced red wine with mascarpone and almond shortbead. Very pleased. @drjartnsoul @luddlj <a href="#">23 December</a></li>
      <li>Back in the homeland. Hello Winds, Jeet, Sunrise, and finally after many years, Auberge. I can't wait to eat you! <a href="#">20 December</a></li>
      <li>@lipstickvegan has made more raw chocolate truffles! thank heavens for foodie friends. <a href="#">November 23</a></li>
      <li>Ft. Meyers had some nice surprises: Cibo and Crave. Definitely worth the trip, and next door to each other! @ciboftmeyers @craveftmeyers <a href="#">November 9</a></li>
   </ul>
   <p class="morelink"><a href="#">More tweets &gt;</a></p>
   </div><!-- end recenttweets -->
       <div id="recentpics">
       <h3 class="pic">recent pics</h3>
       <ul id="photobadge">
         <li class="left top"><img src="th_vintnergrill.jpg" alt="" /></li>
         <li class="top"><img src="th_poffertjes.jpg" alt="" /></li>
         <li class="left top"><img src="th_empanadasplace.jpg" alt="" /></li>
         <li class="top"><img src="th_amberstorte.jpg" alt="" /></li>
         <li class="left top"><img src="th_rawlv.jpg" alt="" /></li>
         <li class="top"><img src="th_dupain.jpg" alt="" /></li>
         <li class="left"><img src="th_rawchocolate.jpg" alt="" /></li>
         <li><img src="th_meadowlark.jpg" alt="" /></li>
       </ul>
       <p class="morelink"><a href="#">More pics &gt;</a></p>
    </div><!-- end photos -->
 </div><!-- end recentscolumn -->
 <div id="blogessentials">
    <div id="sideimage">
    </div><!-- end sideimage -->
    <div id="feed">
    <h4 class="feed">feed<span class="styled">junkie</span></h4>
    <p><a href="#"><img src="rss-red16.gif" alt="" /></a> Feed me Seymour!</p>
    </div><!-- end feed -->
    <div id="subscription">
       <h4 class="subscription">subscription<span class="styled">junkie</span></h4>

        <p>You know you've gotta have it.<br /> Don't fight it. Get your fix by email:</p>
        <form id="subscribeform" action="post">
        <p><input type="text" size="16" class="textinput" /><input type="submit" value="subscribe" class="subscribe"/></p>
        </form>
      </div><!-- end subscription -->
      <div id="recipe">
         <h4 class="recipe">recipe<span class="styled">junkie</span></h4>
         <ul id="recipelist">
            <li><a href="#">Sweet potato biscuits</a></li>
            <li><a href="#">Tilapia Piccata</a></li>
            <li><a href="#">Cornmeal Pancakes</a></li>
            <li><a href="#">Jamaican Laktes</a></li>
            <li><a href="#">Vegan Chocolate Pudding</a></li>
            <li><a href="#">Sunny Tapenade</a></li>
         </ul>
         <p class="morelink"><a href="#">More recipes &gt;</a></p>
       </div><!-- end recipe -->
       <div id="community">
         <h4 class="community">community<span class="styled">junkie</span></h4>
         <p class="members">Newest community members to join!</p>
         <ul id="communityphotos">
           <li class="top"><img src="photos_community/th_mellemusic.jpg" alt="" /><br /><a href="#">mellemusic</a></li>
           <li class="top"><img src="photos_community/th_allaboutgeorge.jpg" alt="" /><br /><a href="#">george</a></li>
           <li class="top"><img src="photos_community/th_webinista.jpg" alt="" /><br /><a href="#">webinista</a></li>
           <li class="top right"><img src="photos_community/th_lynneluvah.png" alt="" /><br /><a href="#">lynneluvah</a></li>
           <li><img src="photos_community/th_mmoss7.jpg" alt="" /><br /><a href="#">mmoss</a></li>
           <li><img src="photos_community/th_msjen.jpg" alt="" /><br /><a href="#">msjen</a></li>
           <li><img src="photos_community/th_misterjt.jpg" alt="" /><br /><a href="#">misterjt</a></li>
           <li class="right"><img src="photos_community/th_skeskali.jpg" alt="" /><br /><a href="#">skeskali</a></li>
       </ul>
       <p class="morelink"><a href="#">Join in and share! &gt;</a></p>
     </div><!-- end community -->

     <div id="social">
        <h4 class="social">social<span class="styled">junkie</span></h4>
        <ul id="sociallinks">
          <li><a href="#"><img src="flickr.png" alt="" /></a><a href="#">flickr</a></li>
          <li><a href="#"><img src="twitter.png" alt="" /></a><a href="#">twitter</a></li>
          <li><a href="#"><img src="friendfeed.png" alt="" /></a><a href="#">friendfeed</a></li>
          <li><a href="#"><img src="facebook.png" alt="" /></a><a href="#">facebook</a></li>
          <li><a href="#"><img src="delicious.png" alt="" /></a><a href="#">delicious</a></li>
          <li><a href="#"><img src="yelp_16.png" alt="" /></a><a href="#">yelp</a></li>
          <li><a href="#"><img src="dopplr.png" alt="" /></a><a href="#">dopplr</a></li>
          <li><a href="#"><img src="tripadvisor.png" alt="" /></a><a href="#">tripadvisor</a></li>
          <li><a href="#"><img src="brightkite.png" alt="" /></a><a href="#">brightkite</a></li>
          <li><a href="#"><img src="vimeo.png" alt="" /></a><a href="#">vimeo</a></li>
       </ul>
     </div><!-- end social -->
    <div id="blogroll">
       <h4 class="blogroll">foodblog<span class="styled">junkie</span></h4>
       <ul id="bloglist">
       <li><a href="#">Mango &amp; Lime</a></li>
       <li><a href="#">Serious Eats</a></li>
       <li><a href="#">Chocolate and Zucchini</a></li>
       <li><a href="#">Aapplemint</a></li>
       <li><a href="#">Albion Cooks</a></li>
       <li><a href="#">The Raw Chef</a></li>
       <li><a href="#">Chez Pim</a></li>
       <li><a href="#">Confessions of a Cardamom Addict</a></li>
       <li><a href="#">Food Blogga</a></li>
       <li><a href="#">Gluten-free Goddess</a></li>
       <li><a href="#">Lipstick Vegan</a></li>
       </ul>
     </div><!-- end blogroll -->
  </div><!-- end blogessentials -->
</div><!-- end pagebody -->
<div id="pagefoot">
<p>copyright &copy; eateryjunkie 2010 &middot; powered by <a href="#">somecms</a><br />
theme design by <a href="#">zimma studios</a> &middot; main photo by <a href="#">billwisserphoto.com</a></p>
</div><!-- end pagefoot -->
</div><!-- end pagewrapper -->
</body>
</html>

The Evidence Never Lies

The XHTML validation produced no errors—I would expect no less from a developer (Figure 6.3):

This document was successfully checked as XHTML 1.0 Strict!

Figure 6.3. EateryJunkie’s HTML validation results

image

In stark contrast, the CSS report was less than sterling (Figure 6.4):

Sorry! We found the following errors (8)
9     h2, h3, h4, #sitenav  Property font-face doesn't exist : Courier New,monospace
54    #pagewrapper div  Property over-flow doesn't exist : hidden
60    #pagehead h1  Value Error : background Too many values or values are not recognized : #f9ecd4 url(logo_eateryjunkie.png) middle middle no-repeat
161   #featuredpost h3  Property font-face doesn't exist : Georgia,serif
251   #recentpics ul  Property over-flow doesn't exist : auto
287   #blogessentials  img Property valign doesn't exist : middle
365   #community ul  Property over-flow doesn't exist : hidden

Figure 6.4. EateryJunkie’s CSS validation results

image

Confirming suspicions and naming the culprit

My read of Bob was spot on: the CSS and design stuff was never particularly interesting to him, so he hasn’t put much effort toward retaining it. Many of his errors were made because he confused HTML tag attributes with the equivalent CSS property, which he easily would have found with validating. To wit:

  1. The navigation font was incorrect because he confused font-face with font-family in two instances.

    If we look at the style, we can see that the intention was for the font to show up as Courier (Figure 6.5):

    h2, h3, h4, #sitenav {
    font-face: Courier New, monospace;}

    Figure 6.5. Nice enough navigation, but not exactly the style we wanted

    image

    In order to let the style express itself, we need to make a simple change:

    h2, h3, h4, #sitenav {
    font-family: Courier New, monospace;}

    Similarly, the blog-post title is supposed to be in Georgia, or at least with a serif font, but instead we have this:

    #featuredpost h3 {
    border-bottom: 1px dotted #A15825;
    font-face: Georgia, serif;
    line-height: 1.3em;
    }

    And here’s the rendered product (Figure 6.6):

    Figure 6.6. A simple case of an unintended non-serif font

    image

    So we definitely need to make this change to get some satisfaction:

    #featuredpost h3 {
    border-bottom: 1px dotted #A15825;
    font-family: Georgia, serif;
    line-height: 1.3em;
    }

  2. Bob rightfully employed a clearing technique for all of the floated divs. However, by misstating the overflow property as over-flow, the uncontained floating divs break the design (Figure 6.7) and also cause some spacing and layout issues (Figures 6.8 and 6.9).

    Figure 6.7. Uncontained floats break the page head.

    image

    Figure 6.8. Uncontained floats cause text misplacement.

    image

    Figure 6.9. Where’s the page background for the faux columns?

    image

    All of these problems are fixed simply by changing over-flow to overflow:

    #pagewrapper div {
    overflow: hidden;}
    ...

    #recentpics ul {
    margin: 10px auto 10px;
    overflow: auto;
    width: 156px;
    }
    ...
    #community ul {
    margin: 5px auto 10px;
    overflow: hidden;
    width: 225px;
    }

    With all of these changes, the page is looking a lot better, but there’s still room for improvement (Figure 6.10 on the next page).

    Figure 6.10. Things are falling into place.

    image

    The final fixes from the CSS validation results help tremendously.

  3. The page logo wasn’t showing up because Bob used middle instead of center in the style declaration (Figure 6.11 on the next page).

    But this is easily changed:

    #pagehead h1 {
    background: #F9ECD4 url(logo_eateryjunkie.png) center center no-repeat;
    border-right: 2px solid #FFF4ED;
    float: left;
    height:200px;
    margin: 0;
    text-indent: -9999px;
    width: 189px;
    }

    Figure 6.11. EateryJunkie’s logo is missing.

    image

  4. The RSS button wasn’t lining up with the text because Bob used valign instead of vertical-align (Figure 6.12):

    Figure 6.12. The RSS button is out of alignment.

    image

Say no more: we quickly change it to the correct property:

#blogessentials img {
margin-right: 5px;
vertical-align: middle;
}

Once we fix these problems, we re-validate the CSS and produce a report with no errors. However, the head of the page still has issues (Figure 6.13), as do parts of the main content area (Figures 6.14 and 6.15).

Figure 6.13. Search is still out of place.

image

Figure 6.14. The image and caption styling is missing.

image

Figure 6.15. The styling for the “posted by” information is missing as well.

image

So far, Bob has consistently let what he thinks he knows get in the way of using correct code. Let’s bear this in mind while looking at areas where he may have mistakenly named one thing for another.

What do you think we found? You guessed it:

  1. The search-box div was out of place because he specified <div id="sitesearch"> in the markup, but referred to it as #searchsite in the CSS in two instances:

    #searchsite {
    background-color: #482C21;
    border-top: 2px solid #FFF4ED;
    clear: right;
    float: right;
    height: 40px;
    margin: -42px 0 0 0;
    width: 250px;
    }
      #searchsite p {
      margin: 8px 0 0 0;}

    Changing the div id to #sitesearch puts the box and the paragraph in it right into place.

  2. Neither the post date line nor the image caption were getting their styling and the caption the smaller text because he confused #postinfo, #imagecaption for .postinfo, .imagecaption:

    #postinfo, #imagecaption {
    font-size: .7em;
    }

    Changing them to .postinfo, .imagecaption gets those styles to render.

  3. Finally, the main blog-post photo didn’t get the border styling for the same reason: he confused #blogphoto for .blogphoto.

    #blogphoto {
    border: 1px solid #7E5E45;
    margin: 5px auto;
    padding: 5px;
    width: 400px;
    }

    A simple swap of . for #, making it .blogphoto, does the trick.

With these problems fixed, the page is now where it needs to be, but there was one last thing that I wanted to warn Bob about. Did you notice it? This part of the code caught my eye—first the markup:

<div id="feed">
  <h4 class="feed">feed<span class="styled">junkie</span></h4>
...

Then the CSS:

h4.feed {
background: url(title_junkiefeed.png) no-repeat;
height:32px;
text-indent: -9999px;
width: 101px;
}

You probably remember that an id should be a unique identifier and used only once in a document. Because the true forbidden practice is to have two ids with the same name, having an id and a class value the same is technically allowable.

However, as a general principle, the best practice is to keep your values different from one another. It’s easier to keep track of which element you are targeting with your styles, and makes for cleaner markup as well.

Although he remained impassive throughout the process, I sense that Bob is actually pleased and relieved that we have found all of the culprits in his code. His page is back to looking exactly like the design spec, and now he can get to the part he enjoys the most: developing the back end.

Case Closed!

It just goes to show you that it’s important to keep up with the CSS properties and specifications. No matter how long you’ve been doing it, there’s a chance you’ve simply gotten something wrong. It takes less time to validate and look up a property than to spin your wheels just because you think (or hope) that you are right.

Furthermore, as in the previous case, while we could rely heavily on the CSS validation results to point the way to the problems, you also need to have an idea of the range of items that could turn out to be issues. Keeping close track of who’s who in terms of id and class names, as well as HTML attributes versus CSS properties, will prevent you from mistaking one for the other.

Finally, you saw the importance of clearing floats in order to make sure a floated layout doesn’t break in action. The overflow: hidden (or auto) property is a great technique and easy to apply to elements.

Another set of culprits found and summarily dealt with. On to the next case!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.12.161.161