Background PNG + vertical-align + IE dans une cellule

Bonjour,

Voilà je souhaiterais avec une image de fond PNG dans une cellule, et par dessus cette image du texte qui soit centré verticalement.

Bon pour l'image et la cellule, tout va bien ça fonctionne, mais le texte n'est pas centré !

Mon code html :

<td class="description">contenu qui doit être verticalement centré.</td>

Le CSS :

.description {
  width:490;
  height:300;
  padding-left:20;
  padding-right:20;
  border:0;
  vertical-align:middle;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/newsletter_description.png') no-repeat center;
}

Je pense que c'est le PNG qui pose problème (lorsque j'utilise un .gif en background tout s'affiche correctement, mais j'ai un dégradé en PNG qui utilise de la transparence et le rendu est bien meilleur en PNG).
Vous avez une idée de comment je pourrais faire pour rendre cette page compatible IE, parce que sous Firefox, comme d'habitude, aucun problème.

Merci.

Ptit_Mouss a écrit :
Je pense que c'est le PNG qui pose problème (lorsque j'utilise un .gif en background tout s'affiche correctement, mais j'ai un dégradé en PNG qui utilise de la transparence et le rendu est bien meilleur en PNG).

Ne serait-ce pas plutôt le filtre pour IE qui provoque ce problème ?

Et l'effet désiré ne peut-il pas être obtenu en « simulant » l'effet de transparence (en enregistrant le rendu final voulu en dur dans l'image) ?

La proprieté filter ne peux pas s'utiliser comme tu le fait, voici la bonne syntaxe :

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='monimage.png', sizingMethod='image/scale/crop');

pour sizingMethod, tu as le choix entre image, scale ou crop, voir la doc de Microsoft :
http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp

tu ne peux donc pas préciser un background-repeat et un background-position, avec cette méthode l'image ne peut donc pas être répétée et est forcement positionnée en haut à gauche du bloc.

c'est moi ou c'est la dernière mode de vouloir du png transparent sur son site ?

Bonjour,

Déjà merci pour les réponses

mpop > Oui je voulais parler du filtre IE pour les fichiers PNG. Et non malheureusement je peux pas créer le rendu en dur car le fond de la page complète peut changer de couleur en fonction des préférences de l'utilisateur.

MrPatate > Effectivement j'ai lu en diagonale la doc microsoft, par défaut sizeMethod est à image, mais bon je l'ai spécifié comme tu l'as suggéré. J'ai supprimé les no-repeat center qui était ma foi bien inutiles. Par contre je pense que tu n'as pas correctement interprété ce que j'ai dis, je souhaite juste que le texte soit au milieu au niveau de l'alignement vertical, l'image de fond est correctement ajustée. En fait j'ai une cellule avec le fond en PNG et du texte dedans que je souhaite correctement aligner. Et non ce n'est pas une mode le PNG c'est juste qu'il permet de faire de jolis dégradés en utilisant la transparence, ce que ne permet pas le GIF !

oui j'avais bien compris mais le non alignement venait peut-être justement de la mauvaise utilisation de la propriété filter car à priori un vertical-align:middle dans une cellule fonctionne très bien, même sous IE.

si maintenant tu as corrigé ce point et que ça ne fonctionne toujours pas, alors c'est effectivement étrange
si tu vire ensuite la propriété filter l'alignement fonctionne ?

(et pour la mode du png c'est de l'humour hein, ça revient souvent sur le forum en ce moment )

Ah désolé je pensais que tu avais mal compris

Oui donc j'ai corrigé et finalement mon code est propre mais le résultat est le même. L'alignement est bon pour l'image mais toujours pas pour le texte, et si je remplace le PNG (donc sans utiliser filter) par un GIF ca fonctionne bien.

Mais bon comme tu dis le PNG c'est à la mode et j'aimerais bien être à la mode

Ptit_Mouss a écrit :
Oui donc j'ai corrigé et finalement mon code est propre mais le résultat est le même. L'alignement est bon pour l'image mais toujours pas pour le texte, et si je remplace le PNG (donc sans utiliser filter) par un GIF ca fonctionne bien.

Et avec le même PNG, mais sans propriété filter ?
Il n'est pas exclu qu'il s'agisse là d'une sorte d'effet secondaire. La documentation de MSDN en parle peut-être (si on la lit pas en diagonale ).

mpop a écrit :

Et avec le même PNG, mais sans propriété filter ?
Il n'est pas exclu qu'il s'agisse là d'une sorte d'effet secondaire. La documentation de MSDN en parle peut-être (si on la lit pas en diagonale ).

Alors sans la propriété filter cela fonctionne bien effectivement ! C'est donc certainement un vice caché de cette propriété comme vous l'avez suggéré. Je vais aller voir la doc MSDN (sans la lire en diagonale cette fois ). Je vous tiens au courant si je trouve des infos ... ou pas.

EDIT : Bon et bien, déjà mieux vaut consulter MSDN avec IE parce qu'avec Firefox on a la moitié du texte qu'est pas affiché, pas de menu etc. bref ceci mis à part je n'ai trouvé aucune allusion à ce problème, et je pense que ce bug ne sera jamais corrigé, j'ai donc utilisé un padding-top pour tenter un pseudo alignement enfin bon ça correspond pas exactement à ce que je voulais mais ca s'en rapproche, si quelqu'un trouve une solution je suis preneur.
Modifié par Ptit_Mouss (17 Oct 2006 - 10:03)

Au pire, s'il s'agit d'un tableau à une seule cellule, le doubler d'une div qui accueillera le fond transparent, et utiliser le tableau pour le vertical-align. Ça alourdit le code, mais pas tant que ça.

Non malheureusement ce n'est pas un tableau à une seule cellule tant pis j'ai gardé mon padding-top:20; qui me donne un résultat correct.

Merci pour tout !