To really get into HTML5 and CSS3, I volunteered to build a website for my HOA. The website works beautifully in Safari, Firefox, and mostly even in IE8. In IE7 and below though, the layout is completely broken. I have Remy Sharp's HTML5 JS file installed, which definitely fixes IE8....but doesn't seem to have an effect on anything else. Any idea how to fix this?

One problem in IE8 though is that my box shadow's are also breaking the borders as soon as the jQuery triggers the next photo to load. Any ideas on that issue?

1 answer


I think the IE7 layout issues are something to do with the -ms-filter you use in your stylesheet.

In your main.css file everything before .photo-back (the first class to use the filter) is rendered fine, but any styles after this are not picked up.

Try deleting these filters (or move them to the end of your CSS file) and I think this will fix the problem.

Answered over 8 years ago by John Catterfeld
  • Thanks for your reply. Removing the -ms-filter alone didn't seem to have an effect. Removing all of the Microsoft enabled filters did though, and fixed the layout in IE7. So...here's a follow up question: I think I can use CSS PIE to add back the drop shadows in IE and even introduce the rounded corners in IE...but is there a way to get the rotation on the photo's back? Thanks so much! Erick Pfleiderer over 8 years ago