[Résolu] Ie6 : aligner une image verticalement

Bonjour à tous !

Encore un qui veut aligner des bidules verticalement vous devez vous dire ! Et vous avez raison !

J'ai les impératifs suivants :
- C'est une image et non un texte que je centre (grosse différence puisque dans le cas du texte ça fonctionne)
- Mon cadre est de largeur et hauteur fixe, mais mon image peut avoir diverses dimensions
- Je dois utiliser un doctype html 4 transitionnal (le strict n'est pas valide car j'ai des target="blank")
- Je ne peux pas utiliser de background-position:center center, puisque je dois avoir un border sur mon image, d'où l'obligation de passer par un img src.
- Ca doit fonctionner sans javascript et à l'identique sur IE6 (donc pas de table-cell non plus)

Je suis déjà allé sur cette page de tutoriel, mais l'exemple ne fonctionne pas sur IE6 (l'auteur le précise).

J'ai fait quelques expérimentations dont voici le résultat :

http://img10.hostingpics.net/thumbs/mini_423588alignvertical.png

- Le coup du texte autour de l'image, c'est pas très propre, mais ça a le mérite de fonctionner sur IE8/FF en Transitionnal. L'idée c'était de remplacer ensuite les "a" par des   , et pourquoi pas mettre un font-size:0.
- Les tableaux, c'est encore moins propre, moi-même ça me fend mon p'tit coeur d'intégrateur de devoir en passer par là , mais faut se rendre à l'évidence : ça fonctionne partout.

Une suggestion ? Une autre idée ?
Modifié par Ziltoid (04 Jul 2010 - 17:18)

ie6 comptabilisai 7% d'utilisateur en mai ( http://www.w3schools.com/browsers/browsers_stats.asp ) , on doit en être aujourd'hui a moins de 6% ... donc une bonne solution serais, revoir les impératifs...
Modifié par matmat (04 Jul 2010 - 00:36)

matmat a écrit :
ie6 comptabilisai 7% d'utilisateur en mai ( http://www.w3schools.com/browsers/browsers_stats.asp ) , on doit en être aujourd'hui a moins de 6% ... donc une bonne solution serais, revoir les impératifs...

Les statistiques sur W3CSchool ne sont pas représentative, elles présentent des chiffres chez un public particulier.

J’en ai au moins le double.

Sinon, pour la question, peut-être que envisager une dégradation honorable pour IE6 pourrait être une solution ?

Je me souviens avoir rencontré ce problème, et je n’avais pas put trouver de solution.

Pour ce qui est des statistiques, il y a aussi celles-ci.
M'enfin j'ai toujours l'impression de bosser pour des boîtes qui sont dans ces 3 à 7% sous IE6.

Tant pis pour mon problème de placement vertical, c'était surtout pour savoir si, à tout hasard, il existait une solution à laquelle je n'avais pas encore pensé.

Merci pour vos réponses, bonne journée !

Hello,

J'ai volontairement zappé IE6 dans mon tutoriel, mais si tu tiens absolument au centrage vertical sur ce navigateur tu peux jeter un œil sur ce cas pratique de Florent qui intègre un correctif.

Bon dimanche.

Excellent ! Merci beaucoup !!

Effectivement je confirme, c'est possible d'avoir une image alignée verticalement aussi sur IE6. Voici le code :

.imagebox {
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background: lightseagreen;
	font-size:0;
}
.imagebox img {
    vertical-align: middle;
	border:4px solid white;
}
.imagebox span {
	display: inline-block;
}

<div class="imagebox">
	<img alt="" src="tof1.jpg" />
	<span>&nbsp;</span>
</div>

Vous pouvez placer la règle .imagebox span dans un "If IE 6".
Le &nbsp; dans le span permet à la fois à l'astuce de fonctionner sur FF/IE8 en Html 4 Transitionnal, mais aussi de ne pas avoir le warning "trimming empty <span>" lors de la validation.

Encore merci ! Bonne journée
Modifié par Ziltoid (04 Jul 2010 - 17:13)