title: CSS Sprites - not showing up in IE 8 and 7
body: <p>I looked around for the answers, but I m not sure if my codes are missing something. I would appreciate it if you could guide me or help me. </p>
  
  <p><strong>Edited per @djlumley's request</strong> </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="wrapper"&gt;
      &lt;header&gt;
        &lt;div class="container"&gt; 
          &lt;h1 id="logo" class="float-left text-left"&gt;&lt;a href="/"&gt;&lt;img src="img/logo.png" alt="Company Name"/&gt;&lt;/a&gt;&lt;/h1&gt;
          &lt;nav id="menu"&gt;
            &lt;ul&gt;
                &lt;li class="home"&gt;&lt;a href="/"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li class="events"&gt;&lt;a href="#"&gt;&lt;span&gt;Diary of Events&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      &lt;/header&gt;
      &lt;div id="slider"&gt;
        &lt;div class="container"&gt; 
          &lt;div class="camera_wrap camera_azure_skin slidereel" id="camera_wrap_1"&gt;
            &lt;div data-thumb="img/slides/thumbs/1.jpg" data-src="img/slides/1.jpg"&gt;
              &lt;div class="camera_caption fadeFromBottom"&gt;Camera is a responsive/adaptive slideshow. &lt;em&gt;Try to resize the browser window&lt;/em&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div data-thumb="img/slides/thumbs/2.jpg" data-src="img/slides/2.jpg"&gt;
              &lt;div class="camera_caption fadeFromBottom"&gt;Camera is a responsive/adaptive slideshow. &lt;em&gt;Try to resize the browser window&lt;/em&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div data-thumb="img/slides/thumbs/3.jpg" data-src="img/slides/3.jpg"&gt;
              &lt;div class="camera_caption fadeFromBottom"&gt;Camera is a responsive/adaptive slideshow. &lt;em&gt;Try to resize the browser window&lt;/em&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;&lt;!--end .container--&gt;
      &lt;/div&gt;&lt;!--end #slider--&gt;
  
      &lt;article&gt;
        &lt;div class="container"&gt; 
          &lt;h2&gt;Examples&lt;/h2&gt;
            &lt;p&gt;Incorporating&lt;/p&gt;
            &lt;div id="corp_container"&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;img src="img/logo_comm.png" alt=""/&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="img/logo_ent.png" alt=""/&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="img/logo_bro.png" alt=""/&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/article&gt;
  
      &lt;footer&gt;
        &lt;div class="container"&gt; 
          &lt;div id="keypartners" class="float-left"&gt;
            &lt;p&gt;Key Partners&lt;/p&gt;
            &lt;ul&gt;
              &lt;li&gt;
                &lt;img src="img/pics_37.jpg" alt=""/&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;img src="img/pics_39.jpg" alt=""/&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div id="hostedby" class="float-left"&gt;
            &lt;p&gt;Hosted by&lt;/p&gt;
            &lt;ul&gt;
              &lt;li&gt;
                &lt;img src="img/pics_41.jpg" alt=""/&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;img src="img/pics_43.jpg" alt=""/&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div id="footernav" class="float-right text-right"&gt;
            &lt;ul&gt;
              &lt;li&gt;Disclaimer&lt;/li&gt;
              &lt;li&gt;Privacy Policy&lt;/li&gt;
              &lt;li&gt;Home&lt;/li&gt;
              &lt;li&gt;Diary of Events&lt;/li&gt;
            &lt;/ul&gt;
  
            &lt;div id="copyright"&gt;
              &lt;p&gt;Copyright &amp;copy; 2012&lt;/p&gt;
              &lt;p&gt;&lt;strong&gt;Last Updated on&lt;/strong&gt; 1 March 2012&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/footer&gt;
    &lt;/div&gt;&lt;!--#wrapper--&gt;
  &lt;/body&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#wrapper{ width:100%;}
  
  header{background:#fff url(../img/logo_bg.jpg) no-repeat; height:87px; width:100%;display:block;}
  header h1#logo{height:20px; margin-top:-10px; width:201px;}
    #menu {float:right;margin-top:35px;width:300px;height:52px; display:block;}
    #menu span{display:none;}
    #menu li, header #menu a{height:52px;display:block;}
    #menu li{float:left; list-style:none;}
    #menu .home a{width:96px;}
    #menu .events a{width:164px;}
    #menu .home a{background:transparent url(../img/navs.png) no-repeat 0px 0px;}
    #menu .events a{background:transparent url(../img/navs.png) no-repeat -96px 0px;}
    #menu .home a:hover{background:transparent url(../img/navs.png) no-repeat -0px -53px;}
    #menu .events a:hover{background:transparent url(../img/navs.png) no-repeat -96px -53px ;}
  
    #event_header{background:#2dacf1;margin: 0 0 10px 0;padding: 5px 0; width:100%;}
  
  
  #slider{
      height:400px;
      /* fallback */ background-color: #33b5f3; 
      background-image: url(../img/banner_slider_bg.jpg);
      background-position: center center; 
      background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ 
      background: -webkit-gradient(radial, center center, 0, center center, 460, from(#33b5f3), to(#4dd6f8));
      /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #33b5f3, #4dd6f8); 
      /* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #33b5f3, #4dd6f8); 
      /* IE 10 */ background: -ms-radial-gradient(circle, #33b5f3, #4dd6f8); /* Opera cannot do radial gradients yet */ }
  }
  
  
  article{width:100%;}
    article h2{ padding:5px 0;}
    article p{margin: 30px 0 20px 40px;}
    #corp_container{background:#fff url(../img/incorporate.png) no-repeat;height:70px; margin:30px 0 80px 0; width:960px;}
    #corp_container ul{list-style:none;}
    #corp_container ul li{display:inline;padding: 30px 20px 8px 0;}
    #corp_container ul li img {margin-top:-10px;}
  
  
  footer{width:100%; background:#f4f4f4; overflow:hidden; padding:20px 0 40px 0;}
    #keypartners, footer #hostedby{padding:0 40px 0 0;}
    #keypartners ul,footer #hostedby ul,footer #footernav ul{list-style:none;margin:0;padding:0;}
    #keypartners ul li,footer #hostedby ul li{padding: 5px 40px 0 0;}
    #keypartners ul li,footer #hostedby ul li,footer #footernav ul li{display:inline;}
    #footernav ul li{border:none; height:auto;padding:5px 10px 0 10px; text-align:center;}
    #footernav li + li {border-left: 1px solid #000;}
    #footernav li:last-child {padding-right:0;}
    #copyright{margin:20px 0 10px 0;}
    #copyright p{padding:0;margin:0;line-height:1.5em;}
  
  table,td,tr,th{
      margin:0;
      padding:0;
      font-weight:normal;
  }
  
  table{font-size:0.8em; margin-bottom:15px; width:100%;}
  table td,table th{padding:5px; border:1px solid #fff; border-width:0 1px 1px 0;}
  thead th{background:#91c5d4;font-weight:bold; }
  thead th[colspan], thead th[rowspan]{background:#66a9bd;}
  tbody th {background:#91c5d4;font-weight:bold; text-align:left;}
  tbody td{background:#d5eaf0;text-align:center;}
  .pink{background:#ffb1b4;}
  .red{background:#ff6b71;}
  .yellow{background:#fcffa2;}
  .purple{background:#f1ddf9;}
  .orange{background:#ffc560;}
  </code></pre>
  
  <p>IE 9 and FF show the navigation ok but not IE 8 and 7, why?</p>