IE7 Rendering My Page a Little Funky

[ericbramlett]

If you look at www.ericbramlett.com in Firefox, it renders the correct way - if you open it in IE6 or IE7, the tables look like they're a little off. Any ideas on correcting this?

[webmaster]

Looks fine in IE 6 for me, I don't have IE 7 on my laptop sorry.

[ericbramlett]

I should have clarified. When you look @ it in firefox, the text next to the smaller bridge picture is flush w/ the picture. When you open it in IE, there's a big gap between the bridge picture & the text. Do you know how I can fix this?

[drpatt]

I can't see your style sheet file, but this usually happens because of the way IE6 handles padding (that is, the wrong way). To correct for IE6 not handling padding correctly you need some CSS code in your style sheet file to handle IE6 differently than compliant browsers. A good reference for this is "Stylin' With CSS" by Wyke-Smith. This book really made it all make sense to me. As to why IE7 doesn't show it right, I can't say. IE7 should have fixed this problem. Looks the same in Opera as in FF, though.

I also see that you are using an XHTML DOCTYPE, but serving the content as text/html. IE6 chokes on this. You'd be better off using HTML 4.01. IE6 really doesn't know what to do with XHTML. Please see http://www.hixie.ch/advocacy/xhtml for a full explanation.

The only other thing I can see is that the page fails validation, so some browsers will have a hard time interpreting your markup. The W3C Validator shows 84 errors. I have no idea if cleaning these up will help, but it can't hurt. The easy fix would be to change to HTML 4.01 Transitional.

[ericbramlett]

Thanks!