PNG-8 format image opacity problem in IE8 & IE7

/*by Jiangong SUN*/

I use jquery ui library for displaying several tabs with correspondant contents in my project. 

It works perfectly in Firefox and Chrome. When I click a tab different from current tab, it will show the content with new tab clicked.

Here is the correct display for my tabs:

Its css is like this:

.ui-tabs-panel { 
	display: block; 
	width: 890px; 
	float:left; 
	border-width: 0; 
	padding: 30px 15px 70px 40px; 
	margin-left:-15px; 
	background: url(bg-tab.png) 0 bottom no-repeat; 
}

But the tabs don't display correctly when I swtich tabs in IE7 & IE8.  

It displays just like this:

Just like what you've seen, the border becomes black, which cause my page disgracefully.

The reason is IE doesn't interprete the opacity of png-8 format image correctly. 

For this reason you can use the recommandation solutions of Jack Moore.

Or just change your image format from png-8 to png-24 like me, because IE works with png-24.

Hope this helps! 

Enjoy coding!