IE et png transparent puce li et <img /> + décalage puce sous IE

Bonjour,

J'espère ne pas me tromper de rubrique pour ce post.

Je suis sous Mac OS X (10.4) et je code à l'aide de CréaText.


Je commence depuis peu le Xhtml + CSS, pour cela j'ai à ma disposition 2 livres :

- Réussir son site web avec Xhtml et CSS de Mathieu Nebra site du zéro,

- Débuter avec les CSS pour le Webdesign de Richard York.

J'utilise aussi les ressources en ligne dont le site Alsacréations et son forum.

Pour mon site que je dévelloppe en Xhtml + CSS, je souhaite utiliser la transparence du format png24 pour divers éléments du design (logo, menu...).

Pour le logo (#header) j'ai mis en place une feuille de style alternative comprenant :

a, input {

	position: relative;

	z-index: 1;

}

#header {

	 background: none;

 	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/skin/logohead.png", sizingMethod="crop");
  
	 width: 411px;
  height: 128px;
  margin: auto;
  padding: auto;

}

Cette solution fonctionne parfaitement et je pense l'utiliser pour des menu avec "rollover, Possible ?

Ce que je recherche par ce post, c'est la démarche à suivre pour réaliser la même chose pour les puce <li> et les images "inline" et bénéficier de la transparence des png24.

Les images pour les puces sont codé dans ma feuille de style principale comme :

 .sous_menu li {
   list-style-image: url("../images/skin/puce.png");
   
   font-size: 0,8em;
   
   line-height: 160%;
   
}

Pour le moment j'ai codé 2 pages, attention l'apparence est provisoire et la disposition aussi, je me concentre actuellement uniquement sur le coté "technique", le design viendra ensuite.


J'ai un domaine qui me sert à faire les test en ligne :

La première page est Accueil

La seconde page est Who's Cat's

Les images (puce) sous IE6 sont collées au texte, comment résoudre ce petit désagément ?


D'autre part, sous IE7 (sur mon portable pc XP et aussi sous visa), seul apparait le body vide ?

Merci par avance de l'aide que vous pourrez m'apporter et de l'attention que vous porterez à ce post.
Modifié par losi (23 Jul 2008 - 12:39)

losi a écrit :
Cette solution fonctionne parfaitement et je pense l'utiliser pour des menu avec "rollover, Possible ?

Possible mais potentiellement casse-gueule. Attention à l'effet secondaire le plus courant du filtre AlphaImageLoader: les liens ne sont plus cliquables. Ça peut se corriger, du moins dans certains cas, avec du positionnement relatif sur les liens concernés. Faire une recherche (notamment en anglais) pour plus d'informations sur le sujet.

losi a écrit :
Ce que je recherche par ce post, c'est la démarche à suivre pour réaliser la même chose pour les puce <li>

Eh bien, ça sera sensiblement la même chose, vu qu'il s'agit aussi d'images de fond.

losi a écrit :
et les images "inline"

Là ça devient plus compliqué... Il faut remplacer, pour IE6 uniquement, les images (éléments HTML IMG) concernées par des DIV aux bonnes dimensions, et leur appliquer le filtre AlphaImageLoader. Il y a des scripts JavaScript qui gèrent ça automatiquement. Mais attention, ça peut avoir des conséquences secondaires aussi (sur le placement des images et du contenu autour). J'aurais tendance à déconseiller l'usage d'images PNG-32 dans le code HTML, si on recherche la compatibilité IE6.

Deux remarques en passant:
1. Bien entendu, tu n'appliques tes correctifs pour la transparence PNG qu'à Internet Explorer 6 uniquement, et pas à IE7 qui la supporte en natif?
2. Dans le design actuel, je ne vois rien qui nécessite l'utilisation de la transparence PNG. Mais peut-être est-ce en préparation du design à venir?

Merci de ta rapidité de réponse.

Je vais donc concernant mes png24 faire autrement, car si je comprends bien je vais avoir plus de soucis qu'autre chose.

a écrit :
1. Bien entendu, tu n'appliques tes correctifs pour la transparence PNG qu'à Internet Explorer 6 uniquement, et pas à IE7 qui la supporte en natif?

pour le correctif IE6, j'utilise :

<!--[if lte IE 6]>

	             <link href="styles/style_so_iefix.css" rel="stylesheet" type="text/css" />

            <! endif -->

Mais au vue de ce qui se passe dans IE7 quand j'ai le code qui envoie vers la feuille de style spécifique pour IE6, dans IE7 seul le body apparait (Accueil), pour le vérifier j'ai retiré le conditionnel if... et la page apparait bien (whos Cat's). Une idée ?

a écrit :
2. Dans le design actuel, je ne vois rien qui nécessite l'utilisation de la transparence PNG. Mais peut-être est-ce en préparation du design à venir?

Dans l'immédiat, je me cantonne à mettre en place la partie "technique" des pages, le design viendra ensuite et s'adaptera au contraintes afin d'obtenir un site compatible avec la plupart des navigateurs.

Concernant les javascript, j'aimerai autant que possible en éviter l'utilisation.

J'ai une autre question :

Comment faire (sans faire appel à javascript) pour donner le choix entre plusieurs CSS, comme CssZenGarden ? (en prévision)

Merci beaucoup.
Modifié par losi (23 Jul 2008 - 14:31)