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:

	$('.guestboox_more').colorbox({
		inline:true,
		href:'.guestbook_more_details',
		innerWidth:'610px',
		opacity: '.2',
		transition: 'elastic'
	});

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

	$('.guestboox_more').colorbox({
		inline:true,
		href:'.guestbook_more_details',
		innerWidth:'610px',
		opacity: '0.2',
		transition: 'elastic'
	});

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.