Our site was designed about 5 years ago and targeted IE6 and 7. The CSS was written by someone with lots of Microsoft-centric experience and little else. As you can imagine, our site doesn’t play well at all with other browsers.
One of the main problems is tables appearing with only one column. I managed to discover IE’s non-standard way of handling display: block styles and fixed it by removing the display style from table cells.
The other issue is that our pop-up windows appear correctly in IE but are transparent in other browsers. Playing around with a page in development mode, (in Safari), I found that removing the float: left style on the <div> that represents the window removes the transparency. Not intuitive at all, to say the least!
Certainly, there must be some other interaction taking place that is affecting the pop-up but this is the only attribute I could change in dev mode that had the desired affect. But darned if I can discover it.
Are there any known cross-browser incompatibilities that could lead to this behavior? I realize that a lot more detail may be necessary to really fix the issue but I’m really just asking for a general principle that may not be obvious to non-experts.
Thanks for the answers guys. I figured it was complex enough a situation that there wasn’t an easy answer but thought by some miracle, others had run across a similar situation.
The site is a proprietary enterprise application and isn’t available outside an internal network so unfortunately I can only go by generalities.