jQuery colorbox plugin no opacity (overlay) – IE7

Today, while checking a website I did heavy client side work – converting PSD’s to html, CSS and JavaScript, I checked everything on IE7. One of the most annoying things I encountered was that the colorbox overlay color was pitch black.

On other browsers, such as Firefox or Chrome everything seemed fine and the overlay was in the correct opacity. However, I like fixing everything and found a very easy way to do so.

This was my code before:

[js]

$(‘.guestboox_more’).colorbox({

inline:true,

href:’.guestbook_more_details’,

innerWidth:’610px’,

opacity: ‘.2’,

transition: ‘elastic’

});

[/js]

And this is the code after (this fixed the problem):

[js]

$(‘.guestboox_more’).colorbox({

inline:true,

href:’.guestbook_more_details’,

innerWidth:’610px’,

opacity: ‘0.2’,

transition: ‘elastic’

});

[/js]

The problem was only that IE7 didn’t recognizance .2 as 0.2 and needed to be more specific (as often IE needs).

I hope this will save you some time.