Question

Go to: http://appointview.com/pricing in Internet Explorer (I am using version 9, but in the dev tools setting it to IE7 mode).

The two divs are not lining up on the top, as they do in higher versions of IE, as well as work fine in FF and Chrome. I have inspected the elements pretty thoroughly and can’t figure out what the issue is.

I am not the greatest at cross browser compatibility testing, so maybe there is a fix that is quick and easy?

Answer 1

IE7 is a mess. Try to remove any white-space between the divs, between closing </div> and opening <div>.

For example, from:

  <div>
      First one
  </div>
  <div>
      Second one
  </div>

To:

  <div>
      First one
  </div><div>
      Second one
  </div>

This is a very common bug. White spaces between inline-blocks is problematic. Try to use mouse to select both div, and you will notice that there is a blank character that occupies the undesired space above the second div.