css - PNG Shadow on hover not working in Firefox - What am I doing wrong? -

css - PNG Shadow on hover not working in Firefox - What am I doing wrong? -

i learned how add together shadow png images answers this question. user named dudley posted code works me except if firefox (and older version of safari):

.shadowed { -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5)); filter: url(#drop-shadow); -ms-filter: "progid:dximagetransform.microsoft.dropshadow(offx=12, offy=12, color='#444')"; filter: "progid:dximagetransform.microsoft.dropshadow(offx=12, offy=12, color='#444')"; } <!-- html elements here --> <svg height="0" xmlns="http://www.w3.org/2000/svg"> <filter id="drop-shadow"> <fegaussianblur in="sourcealpha" stddeviation="4"/> <feoffset dx="12" dy="12" result="offsetblur"/> <feflood flood-color="rgba(0,0,0,0.5)"/> <fecomposite in2="offsetblur" operator="in"/> <femerge> <femergenode/> <femergenode in="sourcegraphic"/> </femerge> </filter> </svg>

the code based on this article. added code. used as-is except values offx, offy, , rgb values. additionally, copied css code in a:hover section of css shown below. (note: i'd added id tag alter later seek work, didn't appear work either).

#cssicons > ul > li > a:hover { color: rgb(255,255,221); id: shadowed; -webkit-filter: drop-shadow(-2px 2px 3px rgba(0,0,0,0.5)); filter: url(#drop-shadow); -ms-filter: "progid:dximagetransform.microsoft.dropshadow(offx=2, offy=2, color='#444')"; filter: "progid:dximagetransform.microsoft.dropshadow(offx=2, offy=2, color='#444')"; }

the html looks (truncated brevity):

<link href="/icon_assets/styles.css" rel="stylesheet" type="text/css"> <div id='cssicons'> <ul> <li class='has-sub last'><a href='http://swingbuffalo.com/'><span><img src="/images/swingbuffalo-tiny.png" width="40px" height="40px" title="swingbuffalo.com"></span></a></li> <li class='has-sub last'><a href='http://rhythmshuffle.onbile.com/'><span><img src="/images/mobile.png" width="40px" height="40px" title="mobile site"></span></a></li> <li class='has-sub last'><a href='http://www.facebook.com/events/442624375809049/'><span><img src="/images/fb.png" width="40px" height="40px"></span></a> <ul> <li><a href='https://www.facebook.com/sharer/sharer.php?u=www.rhythmshuffle.com&t=rhythm%20shuffle'><span>share</span></a></li> <li><a href='http://www.facebook.com/plugins/like.php?href=http%3a%2f%2frhythmshuffle.com%2f&send=false&layout=standard&width=450&show_faces=true&font=trebuchet+ms&colorscheme=light&action=like&height=80'><span>like</span></a></li> <li><a href='http://www.facebook.com/events/442624375809049/'><span>rsvp</span></a></li> <li class='last'><a href='http://www.facebook.com/swingbuffalo/'><span>swing buffalo</span></a></li> </ul> </li> ... <svg height="0" xmlns="http://www.w3.org/2000/svg"> <filter id="drop-shadow"> <fegaussianblur in="sourcealpha" stddeviation="4"/> <feoffset dx="2" dy="2" result="offsetblur"/> <feflood flood-color="rgba(0,0,0,0.5)"/> <fecomposite in2="offsetblur" operator="in"/> <femerge> <femergenode/> <femergenode in="sourcegraphic"/> </femerge> </filter> </svg>

the page containing code here. know i'm doing wrong?

thanks, rob

i think may answer

css-filters browser support

browsers back upwards css-filters chrome , safari.

update #1

it works in firefox

the point filter: url(shadow.svg#drop-shadow); needed

.shadowed { -webkit-filter: drop-shadow(-2px 2px 3px rgba(0,0,0,0.5)); filter: url(shadow.svg#drop-shadow); -ms-filter: "progid:dximagetransform.microsoft.dropshadow(offx=2, offy=2, color='#444')"; filter: "progid:dximagetransform.microsoft.dropshadow(offx=2, offy=2, color='#444')"; } #cssicons > ul > li > a:hover { color: rgb(255,255,221); id: shadowed; -webkit-filter: drop-shadow(-2px 2px 3px rgba(0,0,0,0.5)); filter: url(shadow.svg#drop-shadow); -ms-filter: "progid:dximagetransform.microsoft.dropshadow(offx=2, offy=2, color='#444')"; filter: "progid:dximagetransform.microsoft.dropshadow(offx=2, offy=2, color='#444')"; }

i have shadow.svg actual file, not embedded in html.

hint initiated user2057516 : add together "content-type: image/svg+xml" header if doesn't work

css firefox png shadow