title: Background Color on Absolutely Positioned <ul> Not Displaying
body: <p>I have a weird problem with a list that I'm trying to wrap vertically.  The alignment seems to be working, but I have several absolutely-positioned 'li's inside of a relatively-positioned 'div'.  The problem is that the 'li's seem to be displaying outside of the 'div'.  When I set the background-color of the 'div', nothing displays.  When I set the height and width of the 'div' explicitly, it appears overlapping the 'li's.  Here is my html:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;Team 422 | Mech Tech Dragons&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="/home/william/Documents/Team422Site/template/css/standardLayout.css" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
              &lt;div class="main"&gt;
                  &lt;div class="content"&gt;
                      &lt;div class="mainContent"&gt;
                      &lt;div class="footer"&gt;
                          &lt;div class="socialBadges"&gt;
                          &lt;/div&gt;
                          &lt;div class="contactInfo"&gt;
                          &lt;/div&gt;
                          &lt;div class="sponsors"&gt;
                          &lt;/div&gt;
                          &lt;div class="siteMap"&gt;
                              &lt;ul class="siteMapLevel1"&gt;
                                  &lt;li class="siteMapLevel1 siteMapCol1"&gt;About&lt;/li&gt;
                                  &lt;li class="siteMapLevel1 siteMapCol2"&gt;Team 
                                      &lt;br /&gt;
                                      &lt;ul class="siteMapLevel2"&gt;
                                          &lt;li class="siteMapLevel2"&gt;Organization&lt;/li&gt;
                                          &lt;li class="siteMapLevel2"&gt;Members&lt;/li&gt;
                                          &lt;li class="siteMapLevel2"&gt;Documents&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li class="siteMapLevel1 siteMapCol3"&gt;Competition
                                      &lt;br /&gt;
                                      &lt;ul class="siteMapLevel2"&gt;
                                          &lt;li class="siteMapLevel2"&gt;Awards&lt;/li&gt;
                                          &lt;li class="siteMapLevel2"&gt;Robots
                                              &lt;br /&gt;
                                              &lt;ul class="siteMapLevel3"&gt;
                                                  &lt;li class="siteMapLevel3"&gt;Current&lt;/li&gt;
                                                  &lt;li class="siteMapLevel3"&gt;History&lt;/li&gt;
                                                  &lt;li class="siteMapLevel3"&gt;Manual&lt;/li&gt;
                                              &lt;/ul&gt;
                                          &lt;/li&gt;
                                          &lt;li class="siteMapLevel2"&gt;The Game
                                              &lt;br /&gt;
                                              &lt;ul class="siteMapLevel3"&gt;
                                                  &lt;li class="siteMapLevel3"&gt;Overview&lt;/li&gt;
                                                  &lt;li class="siteMapLevel3"&gt;Rules&lt;/li&gt;
                                              &lt;/ul&gt;
                                          &lt;/li&gt;
                                          &lt;li class="siteMapLevel2"&gt;Scouting&lt;/li&gt;
                                          &lt;li class="siteMapLevel2"&gt;Safety&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li class="siteMapLevel1 siteMapCol4"&gt;Outreach 
                                      &lt;br /&gt;
                                      &lt;ul class="siteMapLevel2"&gt;
                                          &lt;li class="siteMapLevel2"&gt;FLL&lt;/li&gt;
                                          &lt;li class="siteMapLevel2"&gt;Service&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li class="siteMapLevel1 siteMapCol5"&gt;Members&lt;/li&gt; 
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;              
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and my css:</p>
  
  <pre><code>body {
      background:#ffffff url('../../template/images/background.png') scroll no-repeat right top;
      font-family:ariel;
      background-color:#ffffff;
      -moz-background-size: 650px 100%;
      border-left:15px solid #007200;
      border-right:15px solid #007200;
      margin:0px;
      padding:0px;
      padding-top:5px;
      min-width:925px;
  }
  
  .main {
      height:100%;
  }
  
  .content {
      margin-left:30px;
      margin-right:30px;
  }
  
  .footer{
      position:relative;
  }
  
  .siteMap {
      position:relative;
      background-color:#ff0000;
  }
  
  .siteMapCol1 {
      position:absolute;
      left:0px;
  }
  
  .siteMapCol2 {
      position:absolute;
      left:150px;
  }
  
  .siteMapCol3 {
      position:absolute;
      left:300px;
  }
  
  .siteMapCol4 {
      position:absolute;
      left:450px;
  }
  
  .siteMapCol5 {
      position:absolute;
      left:600px;
  }
  
  .siteMapLevel1 {
      font-weight:bold;
      list-style-type:none;
      color:#333333;
      text-indent:none;
  }
  
  .siteMapLevel2 {
      font-weight:normal;
      list-style-type:none;
      color:#555555;
      padding-left:0px;
  }
  
  .siteMapLevel3 {
      list-style-type:none;
      color:#555555;
      padding-left:10px;
  }
  </code></pre>
  
  <p>I am displaying on a 1024x768 screen using Firefox 3.6.15</p>