IE8 Rendering extra Padding or Margin

Question

I'm having with some margin or padding issues with IE8 that I'm hoping someone here will be able to help me out. Below is a screenshot of the site in IE7 with the correct spacing (it looks pretty much the same in FF and Chrome/Safari as well).

Next is the same page in IE8 with a whole bunch of extra spacing between the created by line and description.

You can take a look at the live site here. I've messed around with the padding and margins without any luck, I have no idea where the extra space is coming from. Inspecting the element using the IE developer tools shows an offset that doesn't add up to me, but I'm not sure why this would be happening.

Any help at all would be greatly appreciated.

Answer 1

Remove the padding from the div containing The best places for sharing a meal with someone special. and replace the div with a p. See what happens. Adjacent vertical margins should collapse properly.

Answer 2

The problem is with the SPAN at the end of <span style="padding-left: 10px">1 Voter<span>. It should be a closing tag. Change this code to:

<span style="padding-left: 10px">1 Voter</span>

This will fix your problem.