[SOLUCIONADO] Cargar imagenes css

[portal47]

Hola, tengo varios problemas al cargar unos iconos mediante css.

tengo una barra de navegación vertical de un dashboard en la que al pasar el cursor cambia la imagen a otra versión con otro color para darle el efecto de hover, pero al pasar el cursor se nota por un instante que desaparece la imagen y aparece la otra, tambien me pasa que esas imagenes solo aparecen en chrome, en firefox y explorer no se ven

este es en el html:

Código HTML:

 <a href="/"><img id="img1"/><br/>DASHBOARD</a> 

y el css:

Código HTML:

#img1  {
    content: url('../img/menu/icon__0001s_0002_Dashboar.png');
    margin: 0 auto;
}

li:hover #img1 {
    content: url('../img/menu/icon__0000s_0002_Dashboar-hover.png');
}

[AngelKrak]

en vez de que sea content: cambialo por Background-Image: y el Hover tendria que ir en la imagen no?
#img1:hover

[portal47]

si lo hago de esa forma ya no aparece en chrome ni firefox y en explorer se ve una parte cortada.

el li:hover #img1 lo hago para que al pasar el cursor por el elemento de la lista cambie la imagen en lugar de tener que pasar el cursor por la imagen para que cambie

[pzin]

Pues content solo sirve para añadir contenido a pseudo-elementos, según la especificación. Si funciona en uno o varios navegadores es un fallo de esos navegadores.

Lo suyo sería usar CSS Sprites. O, también, generar la imagen por CSS si no es muy compleja.

[portal47]

lo resolvi de esta forma:

en el html:

Código HTML:

<li class="link">
  <a href="/orders/add">
    <img class="imgFirst" src="http://www.forosdelweb.com/f53/img/menu/icon__0000s_0001_plus-hover.png" alt="image">
    <img class="imgFirst" src="http://www.forosdelweb.com/f53/img/menu/icon__0001s_0001_plus.png" alt="image">
  </a>
  <a href="/orders/add" class="navText" style="text-align: center; margin-top:-25px;">NEW ORDER</a>
</li> 

y en css:

Código HTML:

.imgFirst{
    text-align: center;
    margin: 0 auto;
}

    .imgFirst:first-child{
        display: none
    }

    .link:hover .imgFirst:first-child{
        display: block;
    }

    .link:hover .imgFirst:last-child{
        display: none;
    }

.link:hover .navText{
    color: #C5992D;
}

gracias