Why won't my CSS work with Firefox?
I am trying to use content: url to replace the content of my navbar with images. It works with Safari and Chrome, but not Firefox.
Here is an example of my css/html:
.menu-2222 a{
content: url("IMG LOCATION") no-repeat !important;
height:23px;
}
<li class="menu-2222"><a href="/Destination site" title="">title</a></li>
What am I doing wrong here?
Modified by cor-el
Chosen solution
It is probably the no-repeat !important part. The content text should only have the content and CSS rules need to be added separately.
a:before {
content: url(https://support.mozilla.com/media/img/favicon.ico);
font: x-small Arial,freeSans,sans-serif;
color: gray;
}
Read this answer in context
👍 0
All Replies (6)
Upgrade your browser to Firefox 8 and check
Still isn't working
I do not see pseudo-elements in the example. If I read the documentation it looks like in Firefox it only works with the pseudo-elements.
https://developer.mozilla.org/en/CSS/content
http://www.w3.org/TR/CSS21/generate.html
I have tried adding the :before and :after psuedo elements but still it still wont work. When I inspect in firebug my content: url line of css is not even there.
Chosen Solution
It is probably the no-repeat !important part. The content text should only have the content and CSS rules need to be added separately.
a:before {
content: url(https://support.mozilla.com/media/img/favicon.ico);
font: x-small Arial,freeSans,sans-serif;
color: gray;
}
That did the trick, thank you very much!