jQuery, Colorbox, and IE, ugh

OK, I’m at my wits’ end. Please see the following page: Elliott Design Group :: Welcome to Elliott Design Group. Under the green banner to the right a little more than halfway down the page, you can click on either the thumbnail image or the “Click” text. There are two issues:

  1. In all browsers, the Colorbox “window” doesn’t size properly on the first try. But if you close it and then click on the thumbnail/link again, it’s fine. I’m no expert, but I’m guessing that somehow the height of the image in the “popup” isn’t being calculated until after the window is created, but I don’t know how to change this. I tried using the Colorbox “resize” method, but it didn’t make any difference.

  2. In IE, the layout of the popup is completely hosed. Here’s a direct link to the page that is being presented in the popup so you can see what it basically should look like: Elliott Design Group :: Portfolio. Firefox handles it fine, but IE appears to be completely ignoring most or all of the style rules. Why?

Anyone have any ideas for these two problems? I would greatly appreciate any help.


For the first issue, it might help to set their height of the image in the CSS (if this is something that can remain fixed):

#featurebox_main img {width: 385px; height: 327px;}

Thank you for the reply. Unfortunately, it can’t remain fixed, but I’ll try it to see if it addresses the problem, and then I can consider storing the dimensions in the database (and generating the necessary CSS on the fly) if there’s no avoiding it.

Thanks again.

OK, yes, storing the image dimensions in the database, while perhaps not ideal, isn’t too bad, and it does work.

As for the second issue, I had to move the embedded style sheet from between the head tags to between the body tags. I hate to do that, but otherwise IE ignored the styles completely. I don’t know how else to make it work.

Thanks again.