Content url does not display image on firefox browser
The content
property works with ::before
and ::after
.
googlePic::before
{
content: url('../../img/googlePlusIcon.PNG');
}
Read this: http://www.htmldog.com/reference/cssproperties/content/
IE8 only supports the content
property if a !DOCTYPE is specified.
I know this may be a late response, but i came across the same problem.
I looked it up and somehow an url is not a valid 'content' type and even tho Chrome and Safari are being the good guys and show it nicely.
What worked for me, was creating an empty 'content' and using a background to show the image: it works nicely in Chrome, Firefox, Safari and IE8+9
.googlePic:before {
content: '';
background: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
edit: forgot to put the :before after the classname
you have to write two css class in style
.googlePic
{ /*this for crome browser*/
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
.googlePic: after
{ /*this for firefox browser*/
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
and its works for me :)