Search code examples
firefoxdojo.gridxgridx

Firefox doesn't show images

We have a gridx with various span tag linked to a css with images.

HTML in gridx:

<span class="icon active"/>

CSS:

.icon.active{
   content:url(../imgs/attivo.png);
   height: 16px;
}

The problem is that with Firefox it loads the images (we can see it with firebug) but we can't see them. In all the other browsers it works fine.

enter image description here

Solution

  • Try .icon.active::after

    .icon.active::after{
   content:url('https://placeholdit.imgix.net/~text?txtsize=5&txt=i&w=26&h=26');
   height: 26px;
}
    <div class="table"><span class="icon active"></span></div>
<div class="table"><span class="icon active"></span></div>
<div class="table"><span class="icon active"></span></div>
<div class="table"><span class="icon active"></span></div>

    OR background-image:

    .icon.active {
  background: url('https://placeholdit.imgix.net/~text?txtsize=5&txt=Q&w=26&h=26') no-repeat;
  height: 26px;
  width: 26px;
  display: inline-block;
  content: "";
}
    <div class="table"><span class="icon active"></span></div>
<div class="table"><span class="icon active"></span></div>
<div class="table"><span class="icon active"></span></div>
<div class="table"><span class="icon active"></span></div>