This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Why won't my CSS work with Firefox?

more options

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?

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:<br /> <br /> <pre><nowiki>.menu-2222 a{ content: url("IMG LOCATION") no-repeat !important; height:23px; } <li class="menu-2222"><a href="/Destination site" title="">title</a></li></nowiki></pre> 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)

more options

Upgrade your browser to Firefox 8 and check

more options

Still isn't working

more options

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

more options

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.

more options

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;
}
more options

That did the trick, thank you very much!