I’m designing a page in XHTML and CSS using several boxes with borders and outlines. They are z-index: -1. I have another box that overlaps two of these first boxes. It’s z-index: 4. It looks good in Firefox, IE, Chrome and Safari; but in Opera the outlines of the z-index: -1 boxes show over the z-index: 4 box. What can I do to fix this?
Outline is one of those things you should NOT rely on the behavior of cross-browser, especially when it comes to depth sorting of them; they are best used for debugging, NOT for designing. I would suggest using box-shadow with no blur instead -- won't show up on legacy IE, OH well. It's behavior is at least more predictable. Though without seeing the website in question, it's hard to weigh in on what your problem may or may not be.