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>

Recommended Answers

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

Jump to Post

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?

Jump to Post

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).

Jump to Post

All 9 Replies

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.