css - img class tags not being recognized in firefox -

so i'm running social network site, in i've installed plugins , modules allow users edit fan pages having own css editor ( style box ) social engine.

i had main menu had images links referenced via html src vs css i.e <img src=""> vs .div { code } in order allow users alter layout via css created classes each image overwritten.

for stumbled across article ( don't have link ) on stackoverflow bringing how change image using css lead me <img class=""/> , using

.customtag { content:url("http://pathtoimage");  } 

in order modify it.

it shows great in chrome , ie, in firefox not registering , see text + description alt="" tags.

i've been searching few hours unable find exact match this. i'm posting here see if lead me in correct direction. i've tried declaring !doctype using <style> vs <style type="text/css">

while using css validator shows other areas, nothing related current lines of code why not rendering. in firebug doesn't show css registering @ seems.

any appreciated.

http://fmlstudios.com/testdesign/

i've removed menu code site , put separate html file in link above single out issue. appreciate , or pointing me in correct direction. thank taking time read.

since firefox doesn't understand or comprehend content: url(); expects image <img class=""/> you'll need utilize background: url(); instead accepted in browsers.

i.e.

.someimageclass { background: url(pathtoimage); }

`

this cause firefox load image have black border box around due fact it's looking original image specificed in <img class=""/>"

to make workaround create or google "blank.gif" 1x 1px , edit img class to

<img class="someimageclass" alt="" src="blank.gif"/>

now box dissapear , workaround.

hope helps else out there that's been going nuts on this.