I’ve been working on a page that has a modal dialog box that will eventually be the container for a form. It is shown when a more info button is clicked. Everything seems to work in all browsers, but not in IE7. If I delete the CSS rule for .width-limiter, then IE7 behaves, but that’s not an option because it will break the rest of the site. So I’m just wondering if I have something wrong with my javascript, CSS, or what!
Working(not working in IE7) example here:
Modal Test
The reason this is happening is because IE 7 follows a different flow compared to say IE 8 and IE 9, because of this you won’t be able to use z-index on #modal_dialog selector but instead add it to your .width-limiter selector as that is the top level element/parent for your modal window.
Unfortunately I can’t do that, because the code in my example is just an isolation of the problem, and the real page is more complex, not allowing your solution to work. I just moved the modal dialog outside the .width-limiter div, and all is well. Thanks for taking to time to look at my problem and respond. I do appreciate it.