Question

Here is my page

HTML

<div class="pp-foot">
  <span class="big-call-btn"></span>
  <span class="big-chat-btn"></span>
  <a href="#contact_form_photo" rel="prettyPhoto[inline]" class="footer_btn_email_new  big-email-btn"><span></span></a>
</div>

CSS

.pp-foot {
    background: url("../images/prod-page-foot.jpg") no-repeat scroll center top #E4E4E4;
    height: 77px;
}

.big-chat-btn {
   background: url("../images/product-chat-btn.png") no-repeat scroll center top transparent;
   margin: 0 0 0 11px;
}

.pp-foot a {
    margin: 0 0 0 11px;
}
.big-email-btn {
    background: url("../images/product-email-btn.png") no-repeat scroll center top transparent;
}
.big-call-btn, .big-chat-btn, .big-email-btn {
    display: inline-block;
    height: 72px;
    width: 230px;
}

Any ideas what is causing the issue. Firefox is fine but IE is not

Answer 1

You need to add vertical-align: top.

.big-call-btn, .big-chat-btn, .big-email-btn {
    display: inline-block;
    vertical-align: top;
    height: 72px;
    width: 230px;
}

More info:

• http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
• http://www.brunildo.org/test/inline-block.html