1

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

Matt Elhotiby
  • 43,028
  • 85
  • 218
  • 321

1 Answers1

2

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:

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • [It](http://stackoverflow.com/questions/7142539/having-a-problem-lining-up-my-elements-with-css/7142553#7142553) is [always](http://stackoverflow.com/questions/7144843/extra-space-under-textarea-differs-along-browsers/7144960#7144960) `vertical-align`.. – thirtydot Aug 22 '11 at 19:54