Please explain to me why this does not work in FireFox
<img class="icon-expand" />
CSS
.icon-expand {
background: url('../images/expand-plus-icon-24.png') no-repeat;
height: 24px;
width: 24px;
cursor: pointer;
margin: 0 3px;
}
Chrome, Edge and IE11 show it fine. But why FireFox acting silly and shows nothing? Path is correct.
Some Considerations: <img> tags and inlining styles
Since you are using an actual <img> tag, you may want to consider either explicitly setting the src attribute to your target URL as opposed to using a CSS class :
<img src='{your-expand-url}' />
Firefox is likely more strict when it comes to rendering <img> tags by requiring that they have an src attribute :
<img src='' class='icon-expand' />
You'll notice if you include a blank one that you receive the following :
Likewise, you could consider explicitly causing the element to render without a src attribute by using the display: block property on your CSS class :
.icon-expand {
background: url('../images/expand-plus-icon-24.png') no-repeat;
height: 24px;
width: 24px;
cursor: pointer;
margin: 0 3px;
/* This will cause your element to render as expected */
display: block;
}
The Solution: Use a <div>
Since you are using background URLs through CSS, you should consider just using a <div> or similar element as opposed to an <img> tag, which is designed to target an image directly :
<div class="icon-expand"></div>
Example
.icon-expand {
background: url('http://megaicons.net/static/img/icons_sizes/8/60/24/imagetools-expand-icon.png') no-repeat;
height: 24px;
width: 24px;
cursor: pointer;
margin: 0 3px;
}<div class="icon-expand"></div>
Maybe you can try like this:
.icon-expand {
background: url('../images/expand-plus-icon-24.png') no-repeat;
display: block;
height: 24px;
width: 24px;
cursor: pointer;
margin: 0 3px;
}
or maybe this topic could help you: Background image is not displayed in Firefox
<img> is an inline element.
If you want to have background image set to it you should add a display: block to the css.
This is not highly recommended though.
Unless you are certain that you want to use an <img> with background you better choose another option like changing it to a <div> or use the src attribute.
