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

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

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?

Okulungisiwe ngu cor-el

Isisombululo esikhethiwe

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;
}
Funda le mpendulo ngokuhambisana nalesi sihloko 👍 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

Isisombululo Esikhethiwe

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!