Menu
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.
385
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.
177
Excellent catch my friend. I am working with a couple of developers on my web project and had this same issue. Couldn't figure it out for the life of me why it was working in Firefox and not IE (all versions). Did what you said and checked the doctype and sure enough it wasn't complete. One of the other developers must have copied from some legacy code. Anyways, we don't use xhtml strict we use xhtml transitional and it will still allow the colorbox to work properly in IE (all versions) and Firefox. Below is my code I used to get the colorbox working:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
Thanks Mariano for your help on this one. Saved many hours of frustration!
Toby Gutierrez
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
