On a:hover transparent background image won’t work in IE

[mohan]

How can I fix the issue of a:hover transparent background image to work in older IE browsers. I tried whatever:hover, Helix pngfix, filter, etc. but nothing worked :(

The html:

`

Home
Residential
Commercial
Developer Search

`

The CSS:

#tabs {float:left; display:inline; width:960px; height:71px; margin:37px 0 0 17px;}

#tabs a.active {float:left; display:inline; width:234px; height:71px; background:url(images/tabs.png) left top no-repeat; font-family:’open_sans_condensedbold’, sans-serif; font-size:30px; line-height:71px; text-align:center; color:#009de7; margin-left:4px;}

#tabs a.dflt {float:left; display:inline; width:234px; height:71px; font-family:’open_sans_condensedbold’, sans-serif; font-size:30px; line-height:71px; text-align:center; color:#a6e2ff; text-shadow: 1px 1px 0px rgba(0,0,0, 1); margin-left:4px;}

#tabs a:hover.dflt {background:url(images/tabs.png) -234px top no-repeat; color:#edf9ff;}

AND here’s the image I’ve used:

http://postimg.org/image/49u000aa3/

[Paulie_D]

The general ‘rule’ is that if IE doesn’t accept .png files to use a bg color…AFAIK.

Frankly, I believe that IE7+ supports .png files so it’s not really an issue.

IE6 has less than 2% of global browser coverage AFAIK.

[wolfcry911]

try changing the last selector to this:

#tabs a.dflt:hover

[mohan]

@ Paulie_D

I know that old browsers sucks and we should try and avoid… but the website which I am developing is an Indian based website and is depended vastly on IE6 or older browsers according to the analytics. So I needed a solution for a:hover semi-trans bg to work in cross browsers…

@wolfcry911
I tried and also added csshover3.htc + Helix pngfix but didn’t worked :( … I think I am going wrong somewhere

[Paulie_D]

>So I needed a solution for a:hover semi-trans bg to work in cross browsers…

Frankly, you don’t **NEED** transparency but if the client demands that it look the same in ALL browsers (which is something you should be explaining isn’t really necessary) then here’s a link with a few options.

http://www.pngfix.com/

[Author]

Posts