Hi, I am converting a design in PSD to a pure CSS-based layout and have encountered a very annoying IE-bug. The layout has a lot of round cornered boxes with dropshadows. It means quite a few DIV's with background images. I've resorted to using faux-columns and the new "TrashBox" technique. Firefox and Opera are rendering the page fine, but IE is creating overlapping backgrounds from the middle of the page and down...refreshing the page a few times might (or might not) cause the overlapping to disappear. View the bug here: http://www.supermarthe.net/brightcove/ Are there any fixes for this? I've tried to set p-margin to 0, as suggested elsewhere, but that didn't work. I am also open to a different approach to the layout if it will resolve the problem. Thanks in advance!
For cross browser compatibility you can't beat good old fashioned tables in my opinion. For the record the site looks fine in IE7 - nice design.
I'm not sure if this is a factor, but IE does have problems rendering PNGs properly, especially when they're transparent. I can't see anything else that might cause it on the surface. What I'd suggest you do is eliminate sections of code (comment them out) and see which section causes the error first.
It might have been easier to use tables for this layout, but the client specifically wants it done in XHTML/CSS. And they want it cross browser friendly.... Yup, I noticed that, too. Too bad we'll be coding for IE6 for another 10 years AWD, - I tried to comment out code as you suggested. The problem starts with the faux 3-column in the middle... Strange thing is, I also did their landing page, and I have no problems with that one ( http://www.supermarthe.net/brightcove/landingpage.html ) I don't think PNG's are a factor here. They aren't transparent, either. Any other ideas?
If the PNG is causing the problems, you can resolve it with an .htc file like this one: http://www.scss.com.au/family/andrew/webdesign/pngbehavior/ or google around for a better one. There are several out there.
nevetS, I can definitely rule out a PNG-problem. The background-image that is repeating is the top of the container, and that is actually a .gif...Thanks anyway, though. I really don't know what to do...I can't even see another way of laying out the pages to avoid this problem! Any suggestions? Should I just let the client know that this is how it has to be? oslofish
Strange - when I hit refresh, I see the problem for a brief instant and then it disappears. Oslo huh? I lived in Solna (just outside Stockholm) for a while when I was younger. Not exactly right next door, but pretty close in the big scheme of things. If you can resolve the problem in IE only, you could consider wrapping the style def in conditional tags. When I first read of the problem, I was thinking it was a box model problem. It's definitely not that. I wonder if changing your css repeat-x to hardcoded pixel values instead of center top might change things.