Issue Implementing Colorbox Correctly in IE (all versions)

Posted by Andrew on Stack Overflow See other posts from Stack Overflow or by Andrew
Published on 2010-02-18T16:35:08Z Indexed on 2010/04/30 12:37 UTC
Read the original article Hit count: 308

I've been pulling my hair out (and going way over allotted hours) to try and figure out why Colorbox isn't working properly on the following page: http://www.fiberforge.com

I've set up a Colorbox test link on the very bottom right that says "Web Design By All Web Cafe", which should open up a small logo image. In Firefox, Safari, etc the modal behaves as it should, opening center center above all of the existing on-page content. In IE, not only is the modal not centered, but it appears as though it's not obeying absolute positioning and pushing all of the existing on-page content down below. Add to that the fact that it's not opening to the correct size and creating scrollbars next to the modal image, and we have ourselves one ugly modal.

The scrollbars I can live with (by just resizing the min-height of the modal), but I can't figure out why it won't center. Let me say that I did not code this site initially and it was completed quite a few years ago, so there are quite probably numerous CSS hacks to get things to display properly, any number of which may be causing this problem.

By contrast, Thickbox is also set up on this site (if you click on the "Play Video" callout in the dark blue area) and behaves correctly, though suffers from some weird sizing/padding issues, hence the desire to replace it with something a bit more modern and extensible. I can verify that there is no conflict having both of these modal scripts/CSS files concurrently as the problem still occurs with Colorbox even when Thickbox is removed entirely.

Any thoughts or suggestions would be greatly appreciated.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about colorbox