title: Positioning in IE and FF - box fix solution for inconsistent layout between browsers
body: <p>I am building this sprite map, positioning with CSS. I've built the prototype in IE and the box positioning is way off in FF. </p>
  
  <p><img src="https://i.stack.imgur.com/Ria1a.jpg" alt="enter image description here"></p>
  
  <p>As you can see, in IE 9 the background position is lined up correctly, but in FireFox, the ListItem Backgrounds are visible, but severely offset. </p>
  
  <p>Here is my CSS for this layout. Does anyone see a problem that could cause this discrepancy?</p>
  
  <pre><code>#iconmenu #panel1c {left: 1px;   background-position-x: -48px; background-position-y: -9px;   no-repeat;}
  #iconmenu #panel2c {left: 119px; background-position-x: -48px; background-position-y: -87px;  no-repeat;}
  #iconmenu #panel3c {left: 237px; background-position-x: -48px; background-position-y: -165px; no-repeat;}
  #iconmenu #panel4c {left: 354px; background-position-x: -48px; background-position-y: -241px; no-repeat;}
  #iconmenu #panel5c {left: 469px; background-position-x: -48px; background-position-y: -319px; no-repeat;}
  #iconmenu #panel6c {left: 586px; background-position-x: -48px; background-position-y: -397px; no-repeat;}
  #iconmenu #panel7c {left: 704px; background-position-x: -48px; background-position-y: -475px; no-repeat;}
  #iconmenu #panel8c {left: 821px; background-position-x: -48px; background-position-y: -553px; no-repeat;}
  #iconmenu #panel1c a:hover {background: url(&lt;%=Url.Content("~/Images/sprite.png")%&gt;) -48px -630px  no-repeat;}
  #iconmenu #panel2c a:hover {background: url(&lt;%=Url.Content("~/Images/sprite.png")%&gt;) -48px -708px  no-repeat;}
  #iconmenu #panel3c a:hover {background: url(&lt;%=Url.Content("~/Images/sprite.png")%&gt;) -48px -786px  no-repeat;}
  #iconmenu #panel4c a:hover {background: url(&lt;%=Url.Content("~/Images/sprite.png")%&gt;) -48px -862px  no-repeat;}
  #iconmenu #panel5c a:hover {background: url(&lt;%=Url.Content("~/Images/sprite.png")%&gt;) -48px -940px  no-repeat;}
  #iconmenu #panel6c a:hover {background: url(&lt;%=Url.Content("~/Images/sprite.png")%&gt;) -48px -1018px no-repeat;}
  #iconmenu #panel7c a:hover {background: url(&lt;%=Url.Content("~/Images/sprite.png")%&gt;) -48px -1096px no-repeat;}
  #iconmenu #panel8c a:hover {background: url(&lt;%=Url.Content("~/Images/sprite.png")%&gt;) -48px -1174px no-repeat;}
  #iconmenu #panel8c { border-right:0px; }
  #iconmenu    { width: 936px; height: 125px; position: relative; margin-left: 0px; border: solid 1px #ce8a59; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; background-color: #f8efde; }
  #iconmenu li { width: 74px;  height: 74px;  position: absolute; padding-right: 20px; margin: 20px;margin-left: 22px;margin-right: 10px; top: -7px; background: url(&lt;%=Url.Content("~/Images/sprite.png")%&gt;) 0 0 no-repeat;display: block;list-style: none;border-right: 1px solid #d59d6e;}
  #iconmenu a  { width: 73px;  height: 72px;  display: block; }
  #iconmenu a:hover { color: #edc07f; }
  #iconmenu span { font-family: Arial,Tahoma,Verdana;font-size: 10px;font-weight: bold;color: #cc8a5a;margin-top: 0px;padding-top: 9px;line-height: 1em;text-align: center;vertical-align: baseline;display: block;}
  .icon {height:70px; width:100px;}
  .iconMenuItem { float:left; width:117px; height:70px; border-left:1px solid #ce8a59;    }
  </code></pre>
  
  <p>And here is the HTML:</p>
  
  <pre><code>&lt;ul id="iconmenu"&gt;
                              &lt;li id="panel1c"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;span&gt;Production Dashboard&lt;/span&gt;&lt;/li&gt;
                              &lt;li id="panel2c"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;span&gt;Lorem Ipsum&lt;/span&gt;&lt;/li&gt;
                              &lt;li id="panel3c"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;span&gt;Lorem Ipsum&lt;/span&gt;&lt;/li&gt;
                              &lt;li id="panel4c"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;span&gt;Lorem Ipsum&lt;/span&gt;&lt;/li&gt;
                              &lt;li id="panel5c"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;span&gt;Lorem Ipsum&lt;/span&gt;&lt;/li&gt;
                              &lt;li id="panel6c"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;span&gt;Lorem IpsumExcel&lt;/span&gt;&lt;/li&gt;
                              &lt;li id="panel7c"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;span&gt;Lorem Ipsumnt Uploader&lt;/span&gt;&lt;/li&gt;
                              &lt;li id="panel8c"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;span&gt;Lorem Ipsumols&lt;/span&gt;&lt;/li&gt;
                          &lt;/ul&gt;
  </code></pre>
  
  <p>Thank you very much for taking a look!</p>
  
  <p>EDIT - for full disclourse, this is what the code above produces. The first screen shot is based on much older code:</p>
  
  <p><img src="https://i.stack.imgur.com/F4ke1.jpg" alt="enter image description here"></p>