/*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!