CODEWITHSUNDEEP
htmlgoogle-chromefirefox
tsar2512
tsar2512

Reputation: 2994

HTML css image class shows up in Chrome, but not in Firefox

I am generating an html, where I have an image class as shown. I can view the image correctly in chrome/safari. But while the text is shown in Firefox the image does not

By incorrectly I mean that the image does not show

img.wink  {
    content: url(data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=);
}
<h1>Hello</h1>
<img class="wink" />
I am not insane

edit:

ok so following up on @joshadams response it seems like I have to use a different way to support firefox/chrome. Is there a simple way which would work for both?

Upvotes: 1

Views: 554

Answers (2)

Bruno The Frank
Bruno The Frank

Reputation: 384

I think img is not waiting for a content, but for a src, you can try that trick.

img.wink,
img.wink::after  {
    content: url(data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=);
}
.wink {
    display: inline-block;
    background: url(data:image/.gif;base64,R0lGODlhDwAPALMMAP/qAEVFRQAAAP/OAP/JAP6dAP+0AP/+k//9E///x//lAP//6wAAAAAAAAAAAAAAACH5BAEAAAwALAAAAAAPAA8AAARXkEkZap2Y1ZXOGRcWcAgCnEMRTEEnnDCQrtrxxjCoJSZw+y+CKnDo/WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=) no-repeat left center;
    width: 20px;
    height: 20px;
}
<h1>Hello</h1>
<span class="wink"></span>
<br/>
I am not insane

Upvotes: 1

Josh Adams
Josh Adams

Reputation: 2099

need to add the ::after for firefox or sometimes ::before depending on version: https://css-tricks.com/almanac/selectors/a/after-and-before/

/*firefox*/
img.wink::after  {
    content: url(https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png);
}
/*chrome*/
img.wink  {
    content: url(https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png);
    height:10px;
    width: 10px:
}
<h1>Hello</h1>
<img class="wink" />
<br/>
I am not insane <img class="win ab" width = "30px" />

Upvotes: 1

Related Questions