Member Avatar for vizz

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>
  • 5 Contributors
  • 9 Replies
  • 392 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by vizz

Dani AI

Generated

Short diagnosis: a black "halo" around a PNG in IE8 usually comes from the image file (indexed PNG or saved with a matte) or from how IE composes alpha when CSS filters/opacity are in use. 's shorthand was a useful debug step and pointed toward rgba/fallbacks for layering, but the most common root cause is the PNG itself or an IE compositing quirk.

Practical checklist to fix it (in order):

  • Open the PNG directly in IE (navigate to the raw file). If the black edge is visible there, the image was exported with a matte or as an indexed PNG without true alpha — re-export it with a full alpha channel.

  • If the raw image looks fine, inspect CSS for any opacity or IE filters on the element or ancestors (filter, -ms-filter, filter:alpha(...)). Those cause premultiplied-alpha issues and produce halos in IE; remove them or avoid applying them to the PNG element.

  • Re-export the image with a true alpha channel: in Photoshop use File → Save for Web → choose PNG‑24 (Transparency ON) and set Matte to None. In GIMP export with RGBA so the file has a real alpha channel. From the command line a common ImageMagick pattern is:

    convert input.png PNG32:output.png

Other useful checks: ensure the page is rendered in standards mode (valid DOCTYPE) and not in IE compatibility/quirks mode (check with F12). Clear cache or force-refresh (Ctrl+F5) while testing. In the rare case that legacy IE6 support is required, there are old hacks (AlphaImageLoader), but for IE8 the correct solution is a proper PNG with 32-bit alpha or removing any CSS filters that break compositing.

Summary: most likely the image needs to be re-saved as a true alpha PNG (PNG‑24/PNG‑32) or you need to remove any CSS opacity/filter on the element chain; that explains why changing the shorthand affected one edge but not all.

Recommended Answers

All 9 Replies

Member Avatar for lambing

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

Member Avatar for Taywin

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?

Member Avatar for vizz

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

not working still black color around image

Member Avatar for vizz

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

Member Avatar for Taywin

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

Edited by Taywin
Member Avatar for vizz

i'm using IE8 restarting browser doesn't work

Member Avatar for Graphix

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

Member Avatar for Helianthus

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

Member Avatar for vizz

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 meeting, networking, learning, and sharing knowledge.