A website I am working is having a problem with display:table in IE. It seems that in all other browsers, it is working correctly, where the white blocks don’t extend all the way to the bottom of the pages, but in IE, they do. I tried to add a max-height to the blocks, but that didn’t seem to do the trick. If you compare to Firefox or Chrome, you can see the difference.
It looks fine in IE9. Which version are you looking at? I assume you realize that display: table doesn’t work in IE7 and under?
EDIT: looks OK in IE8 too.
Yes looks ok to me in IE8 also.
As Ralph said IE6/7 has no support for display:table so you will have to offer alternatives.
On another matter you can’t wrap block elements in a span
[B]<span class="grey">[/B]
<p>Our bracelets say “Klahan” which means “Brave” in Khmer, the language of Cambodia.</p>
<p>Each bracelet sold brings us one step closer to eradicating the sexual slavery of women and girls in Cambodia, and around the globe.</p>
<p>When you wear your bracelet you become an activist, using fashion as a vehicle for real change.</p>
</span>
That would need to be a div and will likely cause problems in some browsers if it is not a block element.
Much less the faulty comment placements that will trip IE/FF rendering bugs, use of display:table and table-cell for christmas only knows what reason, nonsensical heading orders, H3 doing LEGEND’s job, jquery for nothing (not that there’s EVER a good reason to use that in the first place), broken (at least in opera) google font embed, and uselessly formatted CSS I wouldn’t even TRY to figure out what it’s doing… though the first comment about using meyers bloated idiotic reset and the double close curly at the end aren’t exactly encouraging signs… Much less 8k of CSS for THAT? Ouch.