title: HTML/CSS: IE8 padding / background-position problems
body: <p>For the live view of the problem page go here: <a href="http://rcnhca.org.uk/sites/first_steps/health-safety-and-security/" rel="nofollow noreferrer">http://rcnhca.org.uk/sites/first_steps/health-safety-and-security/</a></p>
  
  <p><strong>Problem 1:</strong>     If you go to that link and rollover the dropdown navigation and it's children you will notice I animate a star background image across each <code>li</code> on <code>mouseenter</code>. However the first time you roll over it in IE8 it animates from the middle of the <code>li</code> even though I specified <code>background-position: -25px 50%;</code>, the strange thing is once jquery applies the same settings inline, it starts to work as expected.</p>
  
  <p><strong>Problem 2:</strong>     As you can see in the image below, IE8 <strong>(This works correctly in IE7)</strong> is incorrectly rendering my padding. I have reset all margin and padding using <code>* {margin: 0; padding: 0;}</code> in <a href="http://rcnhca.org.uk/sites/first_steps/wp-content/themes/Mega%20Amazing/library/css/core.css" rel="nofollow noreferrer">core.css </a>:</p>
  
  <p><img src="https://i.stack.imgur.com/WOgJJ.png" alt="padding error"></p>
  
  <p>The HTML markup for this navigation bar is:</p>
  
  <pre><code>&lt;header class="one"&gt;
      &lt;nav class="container_16 clearfix" id="breadcrumbs"&gt;
          &lt;a href="http://rcnhca.org.uk/sites/first_steps" id="home"&gt;&lt;/a&gt;
          &lt;ul id="parent"&gt;
              &lt;li&gt;
                  &lt;a href="http://rcnhca.org.uk/sites/first_steps/communication/"&gt;Communication&lt;/a&gt;
                  &lt;ul class="child"&gt;
                      &lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/getting-started/"&gt;Getting started&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/health-safety-and-security/"&gt;Health, Safety and Security&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/"&gt;Personal and people development &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/quality/"&gt;Quality&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/equality-diversity-and-rights/"&gt;Equality, diversity and rights &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/clinical-skills/"&gt;Clinical skills&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/additional-material/"&gt;Additional material&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Select a topic&lt;/a&gt;
                  &lt;ul class="child"&gt;
                      &lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/communication/why-communication-is-important/"&gt;Why communication is important&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/communication/communication-methods/"&gt;Communication methods&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/communication/written-communication/"&gt;Barriers to communication&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>and the CSS to boot:</p>
  
  <pre><code>header {
      width: 100%;
  }
  
  header.one {
      height: 50px;
      background: #44a9c4;
  }
  
  header.two {
      height: 45px;
      background: #3393b5;
  }
  
  
  /* =============================================================================
     Breadcrumb navigation
     ========================================================================== */
  
  #breadcrumbs {
      padding: 0 3px 3px 0;
      background: #ffffff;
      border: 0px solid;
      border-left: #3a90a7 2px solid;
      border-right: #3a90a7 2px solid;
      border-bottom: #3a90a7 2px solid;
      -webkit-border-bottom-left-radius: 5px;
      -webkit-border-bottom-right-radius: 5px;
      -moz-border-radius-bottomleft: 5px;
      -moz-border-radius-bottomright: 5px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
  }
  
  #breadcrumbs #home{
      display: block;
      height: 39px;
      width: 55px;
      float: left;
      background-image: url(library/images/home_icon.png);
      background-repeat: no-repeat;
      background-position: center;    
      text-indent: -999em;
  }
  
  #breadcrumbs ul#parent {
      height: 39px;
      width: 905px;
      float: right;
      position: relative;
      background: #f38630;
      border: 0px solid;
      -webkit-box-shadow: inset 0px -2px 0px 0px #cf7229;
      -moz-box-shadow: inset 0px -2px 0px 0px #cf7229;
      box-shadow: inset 0px -2px 0px 0px #cf7229;
      -webkit-border-bottom-left-radius: 5px;
      -webkit-border-bottom-right-radius: 5px;
      -moz-border-radius-bottomleft: 5px;
      -moz-border-radius-bottomright: 5px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
  }
  
  #breadcrumbs ul#parent li {
      position: relative;
      height: 39px;
      float: left;
      min-width: 1px; /* required to fix Opera bug */
      padding: 0 47px 0 15px;
      background-image: url(library/images/breadcrumb_seperator.png);
      background-repeat: no-repeat;
      background-position: right;
      line-height: 39px;
  }
  
  #breadcrumbs ul#parent li a {
      display: block;
      height: 42px;
      font-size: 0.938em;
      font-weight:900;
      letter-spacing: 0.01em;
      color: #ffffff;
      text-decoration: none;
      text-shadow: 0px 2px 0px #cf7229;
  }
  
  #breadcrumbs ul li a:visited {
      color: #ffffff;
  }
  #breadcrumbs ul#parent li:first-child ul {
      left: -5px;
  }
  #breadcrumbs ul#parent li ul {
      position: absolute;
      z-index: 1;
      left: -28px;
      top: 42px;
      background: #ffffff;
      border-left: #3a90a7 2px solid;
      border-right: #3a90a7 2px solid;
      border-bottom: #3a90a7 2px solid;
      -webkit-border-bottom-left-radius: 5px;
      -webkit-border-bottom-right-radius: 5px;
      -moz-border-radius-bottomleft: 5px;
      -moz-border-radius-bottomright: 5px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
  }
  
  .js #breadcrumbs ul#parent li ul {
      display:none;
  }
  
  .no-js #breadcrumbs ul#parent li ul {
      left: -999em;
  }
  
  #breadcrumbs ul#parent li ul li {
      float: none;
      height: 26px;
      margin: 0 3px 3px 3px;
      padding: 0 15px;
      background-image: url(library/images/star-icon.png);
      background-position: -25px center;
      background-repeat: no-repeat;
      background-color: #738793;
      border-radius: 5px; 
      -moz-border-radius: 5px; 
      -webkit-border-radius: 5px;
      line-height: 26px;
      white-space: nowrap;
  }
  
  #breadcrumbs ul#parent li ul li a{
      color: #ffffff;
      text-decoration: none;
      text-shadow: none;
      letter-spacing: 0.01em;
      font-weight: 100;
  }
  
  #breadcrumbs ul#parent li ul li:hover{
      background-color: #3393b5;
  }
  
  .no-js #breadcrumbs ul#parent li ul li:hover{
      background-position: 6px center;
      text-indent: 10px;
  }
  
  #breadcrumbs ul#parent li:hover ul {
      z-index: 2;
  }
  
  .no-js #breadcrumbs ul#parent li:hover ul {
      left: -5px;
  }
  </code></pre>
  
  <p>I have spent ages trying to debug this problem and can't work out why this is happening, if anyone can shine some light on the matter it would be great. (Note: I am using <a href="http://code.google.com/p/html5shiv/" rel="nofollow noreferrer">HTML5SHIV</a> to render HTML5 elements in legacy browsers)</p>