The CSS Detective Guide: Tricks for solving tough CSS mysteries

9. The Case of the Browser Who Hated Me

IN THIS CASE, WE’LL SEE HOW TO DISARM Microsoft Internet Explorer’s cloak-and-dagger bugs and quickly bring them to justice.

The Crime Scene

Just when former diplomat Guy Thenose thought he could retire with ease, an incident in the United Kingdom occurred that seemed to him to have huge potential to compromise the nation’s security. His lobbying enabled him to head up a new agency to address the very serious threat: the Agency for the Prevention of Spontaneous Dancing (APoSD). Because of the whirlwind of work that accompanies pulling an organization of this import together so quickly, Guy has hired an assistant director, top Agent Single-Oh-Ten Jessica Andrew, and charged her with managing the development of their website and educating the public about the seriousness of this new threat.

As a government office, many of APoSD’s primary users are still obligated to use IE 6 and 7 as their primary browsers. The APoSD site, therefore, has to be more backward-compatible than most modern sites and work perfectly in those browsers. Agent Andrew is finding that while their team is adept at forestalling major international incidents on an almost daily basis, trying to get their site to work in all browsers is a daunting task.

Initial snapshots

Due to force of habit, Agent Andrew slips into my office under the cloak of darkness and in disguise. “Nice Groucho nose,” I compliment her. “I almost didn’t recognize you.”

From a large envelope, she pulls out images of how the website was designed to look (Figure 9.1) and then, wincing, shows me how it looks in IE6 (Figure 9.2), IE7 (Figure 9.3 on page 200), and Opera (Figure 9.4 on page 200) onscreen. “This has to be the work of some evil mastermind,” she says, glancing around furtively. “We just can’t figure out why they are so different!”

Figure 9.1. APoSD’s original design as seen in Mozilla Firefox, IE8, Safari, and Google Chrome

Figure 9.2. APoSD’s site as seen in IE6: call in the troops!

Figure 9.3. APoSD’s site as seen in Internet Explorer 7—not horrible, but there are issues.

Figure 9.4. APoSD’s site navigation as seen in Opera: another indicator that something is amiss

Follow the Evidence

None of our clients have a relaxed development schedule, and APoSD is no exception. Director Thenose and Agent Andrew will be unveiling the new website to their ultimate superior “D” in only three days. They need to quell the riot of their layout so they can continue receiving much-needed support and funding. They want to expand their organization internationally, where the number of incidents is growing rapidly.

Identifying suspects

Even before seeing Agent Andrew’s pages, simply by noticing her high level of twitchiness, I surmised that her problems were all from IE. Her screen shots proved as much: the IE8 and IE7 shots are very close, but the site in IE6 is vastly different from them both.

Because the current browsers have dramatically improved their CSS support and rendering, pronounced layout issues are usually the product of the typical IE bugs. Sadly, these problems will exist until the use of these browsers dies out completely.

Mug shots

True to form, APoSD employed an XHTML 1.1 Strict doctype:

<!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>The Agency for the Prevention of Spontaneous Dancing (APoSD)</
title>
<link rel="shortcut icon" type="image/x-icon" href="aposd.ico" />
<style type="text/css">
/* --- general styles --- */
body {
background: #b6c4e8 url(bg_blue.jpg) repeat-x;
font: .8em/1.35em Arial, Calibri, "Trebuchet MS", Trebuchet, sans-serif;
margin: 0 0 16px 0;
padding: 0 0 16px 0;
}

h1, h2, h3 {
clear: both;
font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
}

h2 {
border-bottom: 1px dotted #3655a3;
color: #ad1c37;
margin: 0;
padding: 8px 0 6px 0;
text-transform: uppercase;
}

h3 {
color: #173187;
margin: 14px 0;
}

h4 {
color: #3655a3;
}

h5 {
font-size: 1em;
margin: 0;
}

ul {
list-style-type: square;
margin: 0;
padding: 0 0 0 16px;
}

ol {
margin: 0 0 0 8px;
padding: 0 0 0 16px;
}

a, a:link {
color: #293F6F;}

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

   a:visited {
   color: #345193;}

a img {
border: none;}

li img {
vertical-align: middle;}

img {
border: 1px solid #D3D5D7;}

.morelink {
clear: both;
float: right;
font-size: .8em;
margin-bottom: 4px;
}

.clear {
clear: both;}

.clearoff {
clear: none;}

/* --- page layout styles --- */
#ubercontainer {
background: transparent url(bg_body.gif)
center repeat-y;
margin: 0 auto;
padding: 0;
width: 1000px;
}

#head {
background: transparent url(bg_head2.gif)
center no-repeat;
height: 324px;
margin: 0 auto;
overflow: hidden;
padding: 0;
width: 1000px;
}

h1 {
background: transparent url(bg_aposd.gif) no-repeat;
float: left;
height: 58px;
margin: 0;
padding: 0;
text-indent: -10000px;
width: 214px;
overflow: hidden;
}

   h1 a {
   display: block;
   height: 100%;
   width: 100%;
   }

#searchbox {
float: right;
height: 58px;
margin: 0;
overflow: hidden;
padding: 0;
width: 214px;
}

   #searchbox p {
   margin: 0;
   padding: 0;
   }

   #searchbox input {
   float: left;
   font-size: .9em;
   margin: 16px 0 0 0;
   }

   #searchbox input.textinput {
   color: #aaa;
   margin-left: 8px;
   margin-right: 4px;
   width: 150px;
   }

   #mainnav {
   clear: both;
   font: bold 1.3em/58px Georgia, "Palatino Linotype", "Times New Roman", serif;
   list-style-type: none;
   height: 55px;
   margin: 235px auto 0 auto;
   padding: 0;
   text-align: center;
   text-transform: uppercase;
   width: 936px;
   }

      #mainnav li {
      display: inline;
      float: left;
      margin: 0;
      padding: 0;
      width: 156px;
      }

      #mainnav a {
      color: #fff;
      display: block;
      height: 100%;
      margin: 0;
      padding: 8px 0;
      text-decoration: none;
      }

      #mainnav a:hover {
      border-top: 8px solid #d9dde7;
      border-bottom: 8px solid #d9dde7;
      color: #d9dde7;
      font-style: normal;
      padding: 0;
      }

#maincontain {
margin: -15px 0 0 0;
overflow: hidden;
padding: 0 0 16px 0;
width: 1000px;
}

#primaryinfo {
float: left;
margin: 0 0 0 31px;
padding: 0 16px 0 16px;
width: 584px;
}

    #about {
    background: #e5eaf7 url(bg_about.gif) no-repeat;
    height: 237px;
    margin: 0 auto 16px auto;
    padding: 0 8px;
    width: 572px;
    }

       #about img {
       margin-top: -42px;}

    img.example {
    background-color: #fff;
    border: 1px solid #D3D5D7;
    float: right;
    margin: -10px 0 8px 10px;
    padding: 2px;
    }

    object {
    float: right;
    margin: 0 0 0 8px;
    }

    ul#circumstances {
    float: left;
    margin: -12px 0 10px 0;
    padding: 0;
    width: 390px;
    }

       #circumstances li {
       margin: 0;
       padding: 0;
       }

       #circumstances li.title {
       list-style-type: none;}

       #circumstances li h4 {
       font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
       margin: 10px 0 0 0;
       }

       ul#illustration {
       float: right;
       list-style-type: none;
       margin: -4px 0 0 0;
       padding: 0;
       text-align: center;
       width: 182px;
       }

          #illustration li {
          border: 1px solid #D3D5D7;
          height: 180px;
          margin: 0 0 8px 0;
          padding: 0;
          width: 182px;
          }

          #illustration li img {
          border: 1px solid #D3D5D7;
          margin: 4px auto 0 auto;
          }

          #illustration p {
          font-size: .75em;
          margin-top: 2px;
          }

  #sidebar {
  float: right;
  margin: 0 33px 0 0;
  padding: 0 16px 0 16px;
  overflow: hidden;
  width: 282px;
  }

  #mission {
  background: #d8d9dc url(bg_mission.gif) top left no-repeat;
  height: 188px;
  margin: 0 auto 16px auto;
  padding: 0 8px;
  width: 270px;
  }

     #mission blockquote {
     font-size: 1.4em;
     margin: 32px 30px 0;
     text-align: center;
     }

     /* --- curly quote styles --- */
     .bqstart {
     color: #eee;
     float: left;
     font-family: Georgia, "Palatino Linotype", "Times New Roman",
     serif;
     font-size: 500%;
     height: 45px;
     margin: -20px -5px -50px -30px;
     padding: 45px 0 0 0;
     }

     .bqend {
     color: #eee;
     float: right;
     font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
     font-size: 500%;
     height: 25px;
     margin: -30px -30px 0 0;
     padding: 45px 0 0 0;
     }

  .chart {
  text-align: center;}

       dl {
       line-height: 1.2em;
       overflow: hidden;
       margin: 0 0 12px 0;
       }

       dt {
       float: right;
       margin: 3px 0 0 0;
       }

          dt img {
          padding: 2px;}

       dd {
       float: left;
       font-size: .9em;
       margin: 0 12px 0 0;
       width: 165px;
       }

          dd p {
          margin: 0;}

       #sociallinks {
       list-style-type: none;
       margin: 0;
       padding: 0 0 0 16px;
       }

       #sociallinks li {
       padding: 4px 0;}

  #fatfooter {
  background: transparent url(bg_footer.gif)
  bottom left no-repeat;
  clear: both;
  margin: 0 auto;
  padding: 0 0 16px 0;
  width: 968px;
  }

  #containedfoot {
  background-color: #fff;
  border-top: 1px solid #E4E4E4;
  font-size: .95em;
  margin: 0 auto;
  padding: 8px 16px 16px 16px;
  width: 904px;
  overflow: hidden;
  }
     #containedfoot h4 {
     margin: 4px 0;}

     #contactus {
     float: left;
     width: 620px;
     margin: 0;
     padding: 0;
     }

        #containedfoot ul {
        list-style-type: none;
        padding: 0;
        }

        #contactlinks li {
        padding: 4px 0;}

     address {
     font-style: normal;}

     #linklist a {
     text-decoration: none;}

        #linklist a:hover {
        text-decoration: underline;}

</style>
</head>
<body>

<div id="ubercontainer">
   <div id="head">
      <h1><a href="#">APoSD.gov - The Agency for the Prevention of Spontaneous Dancing</a></h1>
      <form id="searchbox" action="post">
         <p><input type="text" size="20" class="textinput" value="Search APoSD.gov" /><input type="submit" value="Go!" class="submit" /></p>
      </form>

      <ul id="mainnav">
         <li><a href="#">About</a></li>
         <li><a href="#">Policies</a></li>
         <li><a href="#">Programs</a></li>
         <li><a href="#">News</a></li>
         <li><a href="#">Get Involved</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
   </div>

   <div id="maincontain">
      <div id="primaryinfo">
         <div id="about">
         <h2>About Us</h2>
         <div id="whois">
            <h3>Who is <acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym>?</h3>
            <img src="pic_whois.jpg" class="example" alt="The APoSD Team" />
            <p>The Agency for the Prevention of Spontaneous Dancing (<acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym>) was created as a proactive national security measure in response to the tragic spontaneous train station dance in Liverpool in early 2009, the after- effects of which are still being felt to this day. </p>

            <p>Because of the very serious threat that it poses, rather than being apposed, we are <em>opposed</em> to spontaneous dancing in any way, shape, or form.</p>
         </div>
      </div>

      <div id="policy">
         <h2><acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym> Policy</h2>
         <div id="rising">
            <h3><acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym>: Rising from the Ashes of Tragedy</h3>
            <object width="232" height="143" type="application/x-shockwave-flash" data="http://www.youtube.com/v/mUZrrbgCdYc& hl=en_US&fs=1&">
               <object data="pic_traindancevideo.jpg" type="image/jpeg">Your browser is not displaying the video. Sorry.</object>
               <param name="movie"
               value="http://www.youtube.com/v/mUZrrbgCdYc&hl=en_US &fs=1&"/>
               <param name="allowFullScreen" value="true"/>
               <param name="allowscriptaccess" value="always"/>
            </object>
            <p>Midmorning one day in January 2009, the Liverpool train station was overrun by a group of incognito dancers, who shocked the public with a flagrant display of spirited funky dance moves to catchy popular tunes. Since this incident, spontaneous dancing has exploded worldwide, with brief surprise takeovers of stores, public squares, parks, train stations, and other public gathering places. </p>
            <p>We at <acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym> believe that dancing is serious business. Shaking your groove thing is fine every once in a while, but it must be done when everyone knows it is going to happen at pre-determined times. There is true danger in unexpectedly having a ridiculous amount of fun.</p>
            <p>We have gathered together a team of rigorously trained elite agents who are the product of a highly competitive selection process. We have the resources and the commitment at APoSD to keep dancing controlled and in its rightful place.</p>
         </div>

         <div id="mandatedlist">
            <h3>List of Mandated Dancing Circumstances</h3>
            <ul id="circumstances">
               <li class="title">

               <h4>Sanctioned</h4>
                  <ul>
                     <li>Performances: musicals, ballet, contemporary, jazz, ethnic</li>
                     <li>Dance classes, troupes, parties, clubs </li>
                     <li>Cheerleading squads, drill teams, dance teams, and spirit and glee teams</li>
                     <li>Religious dancing: whirling dervishes, temple, fancy dancing ("Getting Happy" under investigation)</li>
                  </ul>
               </li>
               <li class="title"><h4>Pending Decision</h4>
                  <ul>
                     <li>Carnival/Carnivale/Mardi Gras</li>
                     <li>Capoeria and any other martial art practiced to music</li>
                     <li>Break and hip-hop dancing</li>
                     <li>Sport sack-dances</li>
                     <li>Quasi-choreographed personal greetings (use of "The Bump" is under a dedicated task force review)</li>
                  </ul>
               </li>
               <li class="title"><h4>Strictly Verboten</h4>
                  <ul>
                     <li>Impromptu boogying, shimmying, or hip- shaking</li>
                     <li>Extemporaneous dancing in public areas, especially in train stations, street intersections, parks, beaches, sidewalks, rooftops, and bridges</li>
                     <li>Dance fights/dance- offs - getting "served" and/or being the server</li>
                  </ul>
               </li>
            </ul>

            <ul id="illustration">
               <li>
               <img src="illust_fancydancing .jpg" alt="Fancy Dancer" />
               <p>OK: Fancy Dancing</p>
               </li>
               <li>
               <img src="illust_breakdancing .jpg" alt="Breakdancers" />
               <p>Pending: Breakdancing</p>
               </li>
               <li>
               <img src="illust_parkdance.jpg" alt="Dancing in the park" />
               <p>Right out: Park dancing</p>
               </li>
            </ul>

               <p>All groups and venues must be registered with <acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym>. Circumstances listed apply to those both professional and amateur unless otherwise noted.</p>
               <p>We are always accepting new categories of dancing for review. Read the full set of <a href="#">criteria for acceptable forms of dance</a>.</p>
            </div>
         </div>

         <div id="origins">
            <h2>Origins</h2>
            <div id="roots">
               <h3>Historical Roots of Spontaneous Dancing</h3>
               <img src="pic_ringrosy.jpg" class="example" alt="Children playing ring around the rosey" />
               <p>Scholars suggest that spontaneous dancing (<acronym title="spontaneous dancing">SD</acronym>) has its roots in children's games, notably those such as "Ring Around the Rosey" and "Simon Says." But from innocent beginnings can come unpredictable outcomes. We all know what happens after a pocket full of posey: it's ashes and we all fall down.</p>
               <p>While they may seem harmless, games such as these lay a foundation for future tendencies toward spontaneous dancing. Just as your parents always warned you: it's all fun and games until someone pokes an eye out.</p>
            </div>

            <div id="dangers">
               <h3>The Dangers of <acronym title="spontaneous dancing">SD</acronym></h3>
               <img src="pic_asianladies.jpg" class="example" alt="Ladies dancing" />
               <p>Spontaneous dancing looks benign, nay, even delightful at first glance. However, all of the surface fun and ebullience that it imparts actually masks the underlying dubious tenets of spontaneity, love of fun, and the sheer joy of being alive. Spontaneous dancing often causes huge smiles, laughter, and enjoyment, all of which is highly contagious. </p>
               <p>Freely expressing and epitomizing joyous thoughts and feelings -- even if only for a few minutes -- is extremely risky behavior. It is for this reason that we take our role so seriously: to protect the public from SD and its far-reaching effects.</p>

               <p>It is our goal to keep outbreaks of <acronym title="spontaneous dancing">SD</acronym> to a minimum at present, and for as long as we are able.</p>
            </div>

            <p><span class="morelink"><a href="#">Read more about the problem of<acronym title="spontaneous dancing">SD</acronym> »</a></span></p>
         </div>

         <div id="news">
            <h2>APoSD NEWS</h2>
            <div class="lateststory">
               <h3> Top Story</h3>
               <img src="pic_response.jpg" class="example" alt="Spontaneous dance pizza party" />
               <h4><a href="#">Recent YouTube Uploads from Train Station Dance Trigger <acronym title="post-traumatic stress disorder">PTSD</acronym>-like Symptoms</a></h4>

               <p>Approximately one year since tragedy struck, just as the public was finally starting to forget the lingering traumatic memories of the joyous train station dance, the latest crop of spectator-uploaded YouTube videos illicits a unexpectedly strong emotional response...<br />
               <span class="morelink clearoff"><a href="#">read more></a></span></p>
            </div>

            <h3 class="clearoff">Other Stories</h3>
            <ul id="storylist">
               <li><a href="http://www.youtube.com/watch?v=OLj5zphusLw"> 100 Single Lady <acronym title="spontaneous dance">SD</acronym>-ers Sashay Through Picadilly Square Without Recourse</a></li>
               <li><a href="#">Security Measures at Trains Stations Increased Worldwide, All Boom Boxes Confiscated</a></li>
               <li><a href="http://www.youtube.com/watch?v=NZW92lEzBAs">Stop Hammertime: LA Clothing Store Overrun by Crowd in Gold "Hammer" Pants</a></li>
               <li><a href="http://www.youtube.com/watch?v=7EYAUazLI9k">How Do You Solve a Problem Like a Train Station in Antwerp? Belgium Latest Victim to <acronym title="spontaneous dancing">SD</acronym></a></li>
               <li><a href="#">German Telecom Company Entering Trial for Sponsoring and Promoting <acronym title="spontaneous dancing">SD</acronym> for Commercial Gain</a></li>

               <li><a href="http://www.youtube.com/watch?v=I_DBKZQsldU">Worldwide Thriller SD Gives Credence and Raison D'Etre to New Agency</a></li>
               <li><a href="#">Hundreds of New Bystander-Victims Surface in Liverpool</a></li>
            </ul>

            <p><span class="morelink"><a href="#">See all news »</a></span></p>
         </div>

      </div>

      <div id="sidebar">
         <div id="mission">
            <h2>Mission</h2>
            <blockquote>
               <p><span class="bqstart">“</span>To fearlessly provide the public the best prevention of spontaneous dancing that is humanly possible.<span class="bqend">”</span></p>
            </blockquote>
         </div>

         <div id="getfacts">
            <h2>Get the Facts</h2>
            <div id="progress">
               <h3><acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym> vs. <acronym title="spontaneous dancing">SD</acronym>s</h3>
               <p>Since our inception, we have prevented more than ten serious outbursts of spontaneous dancing, and we project that our prevention rates will only grow in years to come.</p>
               <p class="chart"><img src="chart_aposd.gif" alt="dance prevention figures" /></p>
               <p><span class="morelink"><a href="#">Read more »</a></span></p>
            </div>

            <div id="risks">
               <h3>Know the Risks</h3>
               <p>The general public simply does not have the means to handle massive groups of people dancing out of nowhere. It is far too interesting and thrilling for most people and can cause an aftermath that needs to be dealt with.</p>
               <p>Know ahead what effects being caught in an SD situation might have on you by <a href="#">taking our brief personality type quiz</a>.</p>

               <p><span class="morelink"> <a href="#">Read more »</a></span></p>
            </div>

            <div id="quickref">
               <h3><acronym title="spontaneous dancing">SD</acronym> Prevention Quick Reference Guide</h3>

               <p>In our eyes, an ounce of prevention is worth a true ton of cure. We have assembled a quick reference guide to help you learn the following:</p>
               <ul id="reflist">
                  <li><a href="#">What to look for</a> - recognizing the signs of impending <acronym title="spontaneous dancing">SD</acronym></li>
                  <li><a href="#">What to do</a> - if you suspect an <acronym title="spontaneous dance">SD</acronym> taking place</li>
                  <li><a href="#">Preventative measures</a> - steps to take</li>
                  <li><a href="#">How to report suspicious activity</a> - contacting us and what information to supply</li>
               </ul>

               <p><span class="morelink"><a href="#">Read more »</a></span></p>
            </div>
         </div>

         <div id="getinvolved">
            <h2>Get Involved</h2>
            <p>We have agents working around the world, but <acronym title="spontaneous dancing">SD</acronym> can happen anywhere and at any time. Here's how you can get involved:</p>
            <div id="ways">
               <h3>Do Your Part</h3>
               <ol id="name">
                  <li><a href="#">Report problems</a> before they happen</li>
                  <li>Join a <a href="#">citizen's coalition</a>, like CAPoSD (Citizens Against PDSD's [public displays of spontaneous dancing])</li>
                  <li><a href="#">Organize your own group</a> or meetup (dancing allowed only if it is planned in advance)</li>
                  <li><a href="#">Join our team</a> - become an APoSD agent</li>
               </ol>

               <p><span class="morelink"><a href="#">Read more »</a></span></p>
            </div>

            <div id="offenders">
               <h3>Report a Repeat Offender</h3>
               <p>Have you seen any of these people? If sighted, please report their whereabouts to <acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym> as soon as possible.</p>
               <dl class="wanted">
                  <dt><img src="pic_wanted_ pinqie.jpg" alt="Maaike Speijers" /></dt>
                  <dd><h5>Maaike "Pinqie" Speijers</h5>

                  <p>Last seen practicing <acronym title="spontaneous dancing">SD</acronym> in malls in Northern Europe. May be the mastermind behind several Michael Jackson "Beat It" tribute <acronym title="spontaneous dance"> SD</acronym>s in Sweden.</p>
                  <p class="readmore"><a href="#">read more ></a></p>
                  </dd>
               </dl>

               <dl class="wanted">
                  <dt><img src="pic_wanted_ bhuller.jpg" alt="Bhuller Darshan" /></dt>
                  <dd><h5>"Bhuller" Darshan</h5>
                  <p>Former <acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym> certified choreograper and agent gone renegade. He now encourages kung fu practioners to break into dance as part of their "practice".</p>
                  <p class="readmore"><a href="#">read more ></a></p>
                  </dd>
               </dl>

               <dl class="wanted">
                  <dt><img src="pic_wanted_ thelud.jpg" alt="The Lud" /></dt>
                  <dd><h5>The Artist Formerly Known as "The Lud"</h5>
                     <p>True name and whereabouts unknown. Is often spotted at senior athletic tournaments inciting those disinclined to dance to impetuously "cut a rug". Leader of <acronym title="Moms Opposed to The Agency for the Prevention of Spontaneous Dancing">MOtA</acronym> (Moms Opposed to APoSD). Frequently disguises herself with hats.</p>
                     <p class="readmore"><a href="#">read more ></a></p>
                  </dd>
               </dl>

               <p><span class="morelink"><a href="#">See more offenders »</a></span></p>
            </div>
         </div>

         <div id="getsocial">
            <h2>Get Social</h2>
            <h3>Stay Connected</h3>
            <p>There are many ways to keep up with what we are doing. Check us out on:</p>
            <ul id="sociallinks">
               <li><a href="#"><img src="twitter_16.png" alt="twitter icon" /></a><a href="#">twitter</a></li>
               <li><a href="#"><img src="facebook_16.png" alt="facebook icon" /></a><a href="#">facebook</a></li>

               <li><a href="#"><img src="dopplr_16.png" alt="dopplr icon" /></a><a href="#">dopplr</a></li>
               <li><a href="#"><img src="youtube_16.png" alt="youtube icon" /></a><a href="#">youtube</a></li>

            </ul>
         </div>
      </div>

   </div>

   <div id="fatfooter">
      <div id="containedfoot">

         <div id="contactus">
            <h4>Contact Us</h4>
            <address>
               <acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym> - The Agency for the Prevention of Spontaneous Dancing<br />
               1123 A Street, suite #2010<br />
               Washington, DC 20032<br />
            </address>
            <p><a href="#">Map</a> to our office | <a href="#">Get directions</a> to our office</p>

            <ul id="contactlinks">
               <li><img src="icon_phone_16.gif" alt="phone icon" />Phone: 202.010.0101 | Fax: 202.010.0110</li>
               <li><img src="email_16.png" alt="email icon" /> Send email to: <a href="#">director@aposd.gov</a></li>
            </ul>
         </div>

         <div id="relatedlinks">
            <h4>Related Sites</h4>
            <ul id="linklist" >
               <li><a href="#">Bureau of International Joy Management and Mitigation</a></li>
               <li><a href="#">Workplace Dancing Task Force</a></li>
               <li><a href="#">Citizens Against PDSD's (CAPoSD.org)</a></li>
               <li><a href="#">Flashmobbers Anonymous</a></li>
            </ul>
         </div>

      </div>

   </div>
</div>

</body>
</html>

The Evidence Never Lies

Agent Andrew verified that she’d validated the page and that the code had passed with flying colors. So now we have to get clever about the source of the problems.

Confirming suspicions and naming the culprit

One nice thing you can say about IE6 bugs is that a lot of them are not subtle. Many of the common ones will jump right out of the page at you. Let’s be systematic and start with one of the issues common to both IE6 and IE7: the gap at the top of the page (Figure 9.5).

Figure 9.5. Where is that gap at the top coming from?

The code looks fine at first glance, validates, and shows up well in most of the modern browsers (Firefox, IE8, Safari and Google Chrome) so we will definitely have to widen our sights to find the problem.

Any ideas yet? It would be nice if it were as simple as a margin or padding error. But if that were the case, the problem would show up in all of the browsers, right?

Following my own advice, I say we go right to the CSS of the element in question: #head. Both the top margin and padding are set to zero, and the height is the same as the image, so what gives? Now I see it: there’s only one value established to tell the browser the position (center) of the image. Ha!

#head {
background: transparent url(bg_head.gif) center no-repeat;
height: 324px;
margin: 0 auto;
overflow: hidden;
padding: 0;
width: 1000px;
}

If you don’t supply two coordinate values to determine where to place items on the screen, then the browser may default to a value that you didn’t intend. In this case, because one coordinate is specified but the second coordinate is omitted, the browser has defaulted to a value of center center (or 50% 50%) so the background image will be both horizontally and vertically centered. So let’s add an additional value, which was implied, but not explicitly stated:

#head {
background: transparent url(bg_head.gif) top center no-repeat;
height: 324px;
margin: 0 auto;
overflow: hidden;
padding: 0;
width: 1000px;
}

Eureka! The background image for the #head is now in its proper place, and the gap at the top of the screen is gone (Figure 9.6).

Figure 9.6. Now the gap is gone.

Next order of business: what’s up with the navigation bar? It looks like it’s trying to hide itself behind the main body section in IE6 and IE7 (Figure 9.7).

Figure 9.7. The hover indicator is all we can see of the navigation bar.

Whereas, in Opera, it is completely out of a place, right out in the open (Figure 9.8).

Figure 9.8. The navigation in Opera is doing its own thing

I’m sure that these two extremes of “going into hiding” and flying free are forced rather than freely chosen. Let’s take a closer look at what’s going on:

#mainnav {
clear: both;
font: bold 1.3em/4.5em Georgia, "Palatino Linotype", "Times New Roman", serif;
list-style-type: none;
height: 73px;
margin: 235px auto 0 auto;
padding: 0;
width: 936px;
text-align: center;
text-transform: uppercase;
}

Doesn’t that look fine to you? There is a clear: both; to accommodate the element being in the container with the two floated elements prior to it. The value for the top margin is exactly the number of pixels from the top of the browser window to the navigation area of the background image. What could the problem be?

Let’s do this: let’s clear the slate for the margins and see if that will reveal what is eluding us.

Changing the margin values to this: margin: 0 auto; gives us this onscreen (Figure 9.9).

Figure 9.9. Now we can see the lay of the land.

I don’t know about you, but I believe I see the source of the problem. Did you notice just how far down the navigation element was pushed in the earlier screen shot (Figure 9.7)? Doesn’t it look as if it has the same height as that of the two top floated elements? I’ve got it: the earlier versions of IE are interpreting the margin source-point location differently than the more current browsers! Those older browsers are pushing the element down 235px from the bottom of the two floats, rather than from the top of the browser window.

So, let’s even the playing field, shall we? We have two options to push the element down to the correct position: we can either position #mainnav relatively, or we can give #searchbox a bottom margin of 177px.

To relatively position #mainnav, these changes will do the trick:

#mainnav {
clear: both;
font: bold 1.3em/58px Georgia, "Palatino Linotype", "Times New Roman", serif;
list-style-type: none;
height: 55px;
margin: 0 auto;
padding: 0;

text-align: center;
text-transform: uppercase;
width: 936px;
position: relative;
top: 177px;
}

By adding position: relative to the element, we are telling all of the browsers that the starting point is the location where #mainnav would be if it stayed in its place in the flow after clearing the prior floats.

Similarly, we could also make an adjustment to the bottom margin of #searchbox, which is the element immediately before #mainnav in the source code. Changing the bottom margin value will push #mainnav down the desired amount, with the added advantage of keeping #mainnav in the flow of the page:

#searchbox {
float: right;
height: 58px;
margin: 0 0 177px 0;
overflow: hidden;
padding: 0;
width: 214px;
}

...

#mainnav {
clear: both;
font: bold 1.3em/58px Georgia, "Palatino Linotype", "Times New Roman", serif;
list-style-type: none;
height: 55px;
margin: 0 auto;
padding: 0;
text-align: center;
text-transform: uppercase;
width: 936px;
}

Success! With either of these solutions, all of the browsers will now start from the same coordinates, push the element down 177px from this point, and align the element in the correct location on the page (Figure 9.10).

Figure 9.10. The head of the document: everything fixed

With Opera completely fixed and IE7 mostly taken care of, let’s turn our sights solely to the IE6 issues.

If the serious case of float drop is the first thing that jumps out at you, then we’re on the same page. Here’s my educated guess: the double margin float bug (again!)—but this time on both the left and the right (Figure 9.11).

Figure 9.11. The double-oh-margin float problem

The two elements in question are #primaryinformation and #sidebar. The double margin float bug returns to make a cameo appearance. Since we just dealt with this issue extensively in Chapter 8, let’s put these floats back in place with display: inline;.

#primaryinfo {
display: inline;
float: left;
margin: 0 0 0 31px;
padding: 0 16px 0 16px;
width: 584px;
}

...

#sidebar {
display: inline;
float: right;
margin: 0 33px 0 0;
padding: 0 16px 0 16px;
width: 282px;
overflow: hidden;
}

This does the trick perfectly. Now, we have a couple more items to address.

In the right column, the mugshots of the recent offenders and their descriptions are controlled by definition lists. Although the <dl> tag has the margin defined with the declaration margin: 0 0 12px 0, which is respected by other browsers, IE6 completely ignores the value and collapses this bottom margin. The floated list items don’t clear those before them and we get this (Figure 9.12 on the next page).

Figure 9.12. The bottom margin is ignored and is collapsed

The solution? Be explicit and make sure the floats all clear in every browser, by adding clear: both; to the dl style declaration:

dl {
clear: both;
overflow: hidden;
margin: 0 0 12px 0;
line-height: 1.2em;
}

Now the lineup of repeat offenders, uh, lines up across all the browsers (Figure 9.13, above right).

Figure 9.13. Now the space is respected

For the page overall, there is the issue of how the size of the text renders on the page. There is enough of a difference cross-browser that it detracts from the user experience (Figures 9.14 and 9.15).

Figure 9.14. Text sizing in modern browsers

Figure 9.15. Text sizing in IE 6 and 7

I propose a change that is not so much a bug fix, but rather a technique for ensuring—as in the earlier example with the margin of the navigation bar—that we establish the same sizing starting point for all of the browsers.

In order to get the consistency we want and still have relative sizes, let’s make these few small adjustments:

body {
background: #b6c4e8 url(bg_blue.jpg) repeat-x;
font: 12px/18px Arial, Calibri, "Trebuchet MS", Trebuchet, sans-serif;
margin: 0 0 16px 0;
padding: 0 0 16px 0;
}
...

h2 {
border-bottom: 1px dotted #3655a3;
color: #ad1c37;
font-size: 1.6em;
margin: 0;
padding: 8px 0 6px 0;
text-transform: uppercase;
}

h3 {
color: #173187;
font-size: 1.4em;
margin: 14px 0;}

h4 {
color: #3655a3;
font-size: 1.2em;
}

Once we do this, we have fixed all of the problems, and the pages show up essentially the same in Firefox and in IE 6, 7, and 8.

The footer of the page looks fine, except—wait, what just happened?! Did you see that? Where is the bottom of the page (Figure 9.16)?

Figure 9.16. The guillotine bug cut the footer short

My goodness, it’s no small wonder that Agent Andrew is so tense—this kind of unplanned interactivity would not shine a favorable light upon their organization, in the footer of the page or otherwise. My friend, we are looking at none other but the infamous guillotine bug.

If you remember from Chapter 4, the elements that need to be in place for the guillotine bug to appear are as follows: a parent container element, a floated element inside of that container that is not cleared, links inside the parent container in non-floated content after the float, and finally, style rules for those links that change certain link properties on hover. What happens is that hovering over the links causes part of the floated element inside of the parent container to get cut off and become inaccessible.

This particular IE6 bug stumped front-end developers for years. However, this bug has now met its match: from years of trial and error, we have several solid code solutions to thwart it.

Thankfully, this version of the guillotine bug was particularly obedient to the IE6–specific Star HTML hack delivering a height of 1% to all of the divs on the page, including the ones containing the bug: * html div {height: 1%;}.

Once this code is added as the second declaration in the CSS, the footer of the page is neutralized and stays agreeably still.

However, just as APoSD is dedicated to prevention, I feel it is my patriotic duty to show how this particular bug could have been avoided entirely. Let’s take a look at the basic markup first:

And now let’s look at the pertinent area of the CSS:

#contactus {
float: left;
width: 620px;
margin: 0;
padding: 0;
}

Hmm. It seems to me that whoever did the coding pushed the #relatedlinks div over to the desired position by making #contactus really wide. While that works, there are other ways of achieving the same visual outcome that are a bit more elegant.

I suggest making the width of #contactus a more reasonable width, and then floating #relatedlinks to the right:

#contactus {
border: 1px dotted red;
display: inline;
float: left;
width: 350px;
margin: 0;
padding: 0;
}

...

#relatedlinks {
display: inline;
float: right;
width: 280px;
}

This also solves the guillotine bug, and is more in line with current coding practices.

We can breathe a sigh of relief. We have the satisfaction of knowing that we prevented yet another coding situation that had the potential to threaten national security and maybe even shift the axis of global political power. However, for the rest of the world, it is just another ordinary day.

Case Closed!

From years of training, Agent Single-Oh-Ten (Andrew) managed to maintain a calm exterior during the whole debugging process, but the faintest hint of moisture on her brow belied her true anxieties over the way IE was rendering her organization’s site. Once all of the fixes were in the document, however, her tension dissipated and she was truly satisfied with the outcome.

Staying on the trail of bugs and divining the cause of their errant behavior requires fortitude. However, getting around all of the intrigue and subterfuge that IE 6 and 7 provide is what keeps this job interesting. Well, that plus all the travel to foreign lands and getting entangled with a vast array of characters. CSS detectives and special government agents have much more in common than one would initially think.

As in the previous cases, our process starts with validating to see if we have missed some small yet necessary detail. Once that knowledge is established, we start looking for the problems in the area of the pages located. This time, because the browser differences were dramatic, we could use this fact to help us further zero in on the source—browser-specific bugs—thereby ruling out other possibilities and limiting the number of solutions.

This case also underlines the necessity of taking cross-browser testing seriously. We focused on certain major browsers based on the primary audience of the site. Having an idea of your target users—specifically, which browsers they are using and to what degree they are using them—provides the parameters for your coding, debugging, and QA processes.

Luckily for us, we were already aware of the bugs that presented themselves, but that won’t always be the case. Whenever the page behaves strangely, see yourself as duty-bound to research and find the true source of the problem and then dispatch it with laser-like precision rather than flail around haphazardly trying random fixes.

Taking all of these steps into consideration and putting them into action should give you some major bug-fixing confidence. Instead of getting wrapped up in any given browser’s sly buggy-ness, use your keen eye to see right through the façade and pinpoint the problems quickly. You will have all the browsers you are coding for dancing to the same tune, so to speak.

Your training is almost complete. You’ll put your skills to the final test in Chapter 10, The Case of the LOL Layout.

Previous Chapter

8. The Case of the Float with a Mind of Its Own

Next Chapter

10. The Case of the LOL Layout

Table of Contents for The CSS Detective Guide: Tricks for solving tough CSS mysteries