Why does ColorBox does not appear in Internet Explorer?

Question

I am using ColorBox to show details of events on a calendar. The address to view it is http://www.idea-palette.com/greatoppseventcal/calendar6.php

In firefox, when the user clicks on a day with an event, the lightbox opens and displays the event information from the database.

In Internet explorer, when the user clicks on a day with an event, the calendar is pushed down and there is a big white empty area above the calendar. When you click on the empty area, the calendar is pushed back up, as if the lightbox appears above the calendar until clicked on to close.

---

Here's the jQuery:

$(document).colorbox.init();
$(".date_has_event").click(function(e) {
    var idVal = $(this).attr("idnum");
    $(".date_has_event").colorbox({open: true, initialHeight: "25%", initialWidth: "25%", width:"25%", opacity: 0.25, transition:'fade', inline:true, href:"#" + idVal + " ul"});       
});

Here's the code for the button that is being clicked and the div that is being displayed:

echo ' class="date_has_event" idnum="'.$row2['id'].'" style="background-image: url(images/event_square.png); color: #8CC63F;">'.$day;

echo '<div class="events" id="'.$row2['id'].'">
    <ul>'.$events[$day].'</ul>
</div>';

I am not really sure what to do since It works perfectly in Firefox. Can anybody help me?

Answer 1

It looks like you're using an old version of jQuery. Try upgrading to version 1.3.2 - all of the examples on the ColorBox page are using 1.3.2 and work with IE.