Question

use an icon (.png transparent background) for my menu. There isn’t any problem for IE9, Chrome,Firefox,safari,opera.But if I open page with IE7 or IE8 there is a broken black border around image. CSS codes;

.menu-item1{
  background:url(img/spriteimage.png) no-repeat 0 0;
  height:20px;
  width:20px;
  opacity:0.5;
 } 

How can I fix this?

Answer 1

IE7 and IE8 have native PNG support for alpha-transparencies, but it falls to pieces as soon as opacity comes into the picture

Try faking a background image or setting it to a blank.gif instead of making it transparent.

 background:url(blank.gif);

OR

 /* IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 7 */
  filter: alpha(opacity=50);