Issue Implementing Colorbox Correctly in IE (all versions)
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: [link removed]
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.
Answer
GOT IT!!! .. after modifying A LOT of things in my code (had the same issue) ...
Just put:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
.. at the very begining of your page. It has to be BEFORE includes or everything else.
Hope this helps. Cheers!
Mariano.