28172 sujets

CSS et mise en forme, CSS3

Sprites qui ne s'affichent pas dans IE9

Bonjour,

Mystère...
Grâce aux infos trouvées sur alsacréations, je me suis mis aux sprites CSS pour quelques liens sur mon blog. Tout est ok avec Firefox et Chrome mais rien - absolument - rien ne s'affiche dans IE9... Et je cale, je n'arrive pas à trouver d'où ça peut venir.
Une idée ? Un coup de pouce ? Smiley cligne
Merci !

Mon blog : http://www.vincentdutrait.com/blogv2/

Dans le code de la page, j'ai :
<div id="social">
<ul>
<li><a href="http://www.facebook.com/Vincent.Dutrait" id="facebook"><span>Facebook</span></a></li>
<li><a href="http://twitter.com/VincentDutrait" id="twitter"><span>Twitter</span></a></li>
<li><a href="http://www.linkedin.com/in/vincentdutrait" id="linkedin"><span>LinkedIn</span></a></li>
<li><a href="http://feeds.feedburner.com/VincentDutrait-Illustrations" id="rss"><span>RSS</span></a></li>
<li><a href="http://validator.w3.org/check?uri=referer" id="w3c"><span>W3C</span></a></li>
</ul>
</div>


Dans mon CSS j'ai :
#social {
height:48px;
padding-left:95px;
}

#social li a {
display:block;
float:left;
width:40px;
line-height:48px;
background:url("images/socialsprites.jpg") no-repeat;
border:0;
margin:0;
}

#videos span,#social span {
font-size:0;
}

#videos ul,#social ul {
list-style-type:none;
border:0;
margin:0;
padding:0;
}

#videos li,#social li,*,.tabbed .post .entry p {
margin:0;
padding:0;
}

#videos #ciel1,#videos #ciel1:hover,#videos #ciel1:active,#videos #ciel1:focus,#social #facebook,#social #facebook:hover,#social #facebook:active,#social #facebook:focus {
background-position:0 0;
}

#social #twitter,#social #twitter:hover,#social #twitter:active,#social #twitter:focus {
background-position:0 -150px;
}

#social #linkedin,#social #linkedin:hover,#social #linkedin:active,#social #linkedin:focus {
background-position:0 -50px;
}

#social #rss,#social #rss:hover,#social #rss:active,#social #rss:focus {
background-position:0 -100px;
}

#social #w3c,#social #w3c:hover,#social #w3c:active,#social #w3c:focus {
background-position:0 -200px;
}

Modifié par vdutrait (04 Oct 2011 - 11:21)
Bonjour,

<div id="social">
<ul>
<li><a href="http://www.facebook.com/Vincent.Dutrait" id="facebook"><img src="logofacebook.gif" alt="Facebook"</img></a></li>
...
</ul>
</div>


ça fonctionnera bien mieux, c'est accessible et c'est ergonomique.
Merci.
Mais le hic c'est que je souhaite vraiment utiliser des sprites pour limiter le nombre de requêtes. Je partage souvent beaucoup d'images (et de grandes images aussi).
D'où le besoin d'alléger au maximum le chargement des pages.
Et là ça fonctionne parfaitement un peu partout sauf sur IE9...
Salut,

Ce que Laurie-Anne veut te donner à entendre, c'est que si les images ne se chargent pas (pour diverses raisons) alors que les CSS sont chargées, on n'a plus rien comme information.

Si tu cherches à économiser le nombre de requêtes HTTP, il vaut mieux supprimer les textes de ton image et afficher lesdits textes en dur dans le code HTML (avec mise en forme en CSS). Autrement dit, ton image en sprite ne comportera que les logos.
Modifié par Victor BRITO (04 Oct 2011 - 13:31)
Yep, c'est ce que je pensais faire dans un second temps en fait Smiley biggrin
Et ce sont les "diverses raisons" que tu évoques que je tente de cibler...
Sujet clos
Aller à