CODEWITHSUNDEEP
cssimageclassfirefoxhtml
user2397912
user2397912

Reputation: 21

img class tags not being recognized in firefox

So I'm running a social network site, in which I've installed plugins and modules that allow users to edit their fan pages by having their own CSS editor ( a style box ) This is for Social engine.

I originally had a main menu that had images for links but were referenced via html src vs css i.e <img src=""> vs .div { code } in order to allow users to alter the layout via CSS I created classes for each image so that they could be overwritten.

For this I stumbled across an article ( I don't have the link ) on stackoverflow bringing up how to change an image using CSS which lead me to the <img class=""/> and using 

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

in order to modify it.

It shows up GREAT in chrome and IE, but in Firefox it is simply not registering and all I see is the text + the description for the alt="" tags.

I've been searching for a few hours but unable to find an exact match to this. So I'm posting this here to see if anyone could lead me in the correct direction. I've also tried declaring the !DOCTYPE as well as using <style> vs <style type="text/css">

While using the css validator shows other areas, nothing related to the current lines of code as to why its not rendering. In firebug it doesn't even show the CSS registering at all it seems.

Any help is greatly appreciated.

http://fmlstudios.com/testdesign/

I've removed the menu code from my site and put it into a separate html file in the link above as to single out my issue. Any help is greatly appreciate and or pointing me in the correct direction. Thank you for taking the time to read.

Upvotes: 1

Views: 1445

Answers (1)

user2397912
user2397912

Reputation: 21

Since Firefox doesn't understand or comprehend the content: url(); fully as it expects an image from the <img class=""/> you'll need to utilize background: url(); instead as this is accepted in all browsers.

I.e.

.someimageclass { background: url(pathtoimage); }

`

This will cause firefox to load a an image but it will have a black border box around it due to the fact it's looking for the original image specificed in <img class=""/>"

To make a workaround create or google a "blank.gif" 1x by 1px and edit the img class to

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

Now the box will dissapear and this will be your workaround.

Hope this helps anyone else out there that's been going nuts over this.

Upvotes: 1

Related Questions