I'm adding class through script to <strong></strong> background-color:transparent; is OK in chrome and firefox
but in IE adds black color around image menu_bg.png

How to remove black background of image?

script

$("#navlist li a").hover(function() {  

    $(this).parent().find('strong').addClass("hover");

 }); 

CSS

.hover{ 
        display: inline-block;
        position:absolute;
        background: url(images/menu_bg.png) center no-repeat;
        background-color:transparent;
      } 

HTML

   <ul id="navlist"> 
       <li><a href="about.php">About Us</a><strong></strong></li>
   </ul>

That's weird, can you send us the link of your site so we can see it in IE?

Try to change the CSS definition to...

.hover{
  display: inline-block;
  position: absolute;
  background: transparent url(images/menu_bg.png) center no-repeat;
}

Then see what happen?

background: transparent url(images/menu_bg.png) center no-repeat;

not working still black color around image

now color appears only to left,right and bottom
black color from top gone

What IE version are you using? Also, make sure that the browser doesn't save the old display value (either close the browser or refresh it with Ctrl+F5). Working with CSS sometimes has that problem (browser does not let go old CSS values).

i'm using IE8 restarting browser doesn't work

What do you mean by 'A black color around image'? Send us a screenshot of how it looks like in Firefox/Chrome and how it looks in IE

I found an article that might help you. You would want to use an RGBa background to set the background color for all but IE. Then use a gradient for IE.

This article explains it in pretty good detail with some sample css code:

Click Here

I found an article that might help you. You would want to use an RGBa background to set the background color for all but IE. Then use a gradient for IE.

This article explains it in pretty good detail with some sample css code:

Click Here

Thanks
Problem solved