Different позиционирование DIV между FF и Chrome - HTML CSS

Question

У меня есть подвал на моем сайте, и она хорошо выглядит на Chrome:

Однако, это выглядит не так хорошо на FF:

Похоже, что FF не распознает свойство z-index на моем css. Вот код:

footer.html

<div id="footer"> 
    <img src="layout/footer.png" style="position:absolute; z-index:-1;"></img> 

      <div class="socmed" style="margin-left:20px;"> 
      <a href="www.facebook.com"> 
      <img src="layout/fb.png"></img> 
      </a> 
      </div> 

      <div class="socmed"> 
      <a href="www.facebook.com"> 
      <img src="layout/tw.png"></img> 
      </a> 
      </div> 

      <div class="socmed"> 
      <a href="www.facebook.com"> 
      <img src="layout/yt.png"></img> 
      </a> 
      </div> 

      <div class="clear"></div> 

</div> 

style.css

#footer { 
    margin-top: 30px; 
    margin-bottom:-10px; 
} 

.socmed{ 
    float:left; 
    margin-left:10px; 
    padding-top:5px; 
} 

Есть ли какое-либо решение этой проблемы так у меня есть код, который Chrome & FF будет подчиняться той же позиции? (Позиционирование FF будет выглядеть как Chrome). Благодарю.

Answer 1

Ваш <img />, который является position:absolute; z-index:-1;, должен быть просто background-image на #footer.

#footer { 
    margin-top: 30px; 
    margin-bottom:-10px; 
    background: url('layout/footer.png') no-repeat 0 0; /* this line */ 
} 

Тогда он будет просто сидеть за вашими значками, не делая ничего.

Затем, чтобы убедиться, что #footer имеет высоту (потому что плавали дети получают вырваны из потока документов, так что ваш div больше не будет иметь высоту) вы можете изменить ваш .socmed на:

.socmed{ 
    display: inline-block; /* this line */ 
    margin-left:10px; 
    padding-top:5px; 
} 

Вот код, который я обновил с вашего сайта, и с изображением, которое я захватил у изображений Google:

http://jsfiddle.net/9V2KV/