IE7 text align issue

Question

http://wilwaldon.com/ie7sucks/

If you view this page in anything but IE7 you will see that the spotlight area text is displayed in a column on the right of the image.

For some reason it's not showing as a column and I have no idea why.

Any help would be greatly appreciated and I'd owe you my first born.

Thank you in advance.

Answer 1

Using the developer tools if I got rid of the width: 100% from .onecolumnright P it fixed the problem. Though I'm looking at it using IE 8 in compatibility mode.

Answer 2

You've got some CSS that isn't supported by IE7 (and earlier):

.spotlightbox p { display: table-cell; }

Try replacing that with this, and tweak the width as you like:

.spotlightbox p { width: 160px; }

I tested this at Adobe BrowserLab in Internet Explorer 7.0 and it seems to do the trick.

Answer 3

yeah pressing f12 is a huge help with IE;

.onecolumnright p{
    margin-bottom: 25px;
    color: #333;
    font-size: 16px;
    width: 50%;
}