Image de taille variable + coins arrondis en images + IE6 = marche pas

Bonjour à tous.

Sur mon site je vais avoir des images aux dimensions variables. Je souhaiterais qu'elles aient des coins arrondis. Je sais qu'il y a le CSS3 ou des codes JavaScript qui font ça très bien, mais ça serait mieux si j'avais une solution full CSS2.

Je me suis inspiré de cette astuce. Ca marche partout... sauf dans mon cas sur IE6, car je suis obligé de mettre des width et height 100%, qu'il n'apprécie guère!

<div class="cadre">
	<span class="png hg"></span>
	<span class="png hd"></span>
	<span class="png bg"></span>
	<span class="png bd"></span>
	<img src="images/slide2.jpg" alt="" />
</div>
<br class="clear" />

.cadre {
	position: relative;
	float: left;
}
.cadre span {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0px; left: 0px;
}

.cadre .hg{ background: url('img-hg.png') top left no-repeat; }
.cadre .hd{ background: url('img-hd.png') top right no-repeat; }
.cadre .bg{ background: url('img-bg.png') bottom left no-repeat; }
.cadre .bd{ background: url('img-bd.png') bottom right no-repeat; }

.clear{clear:left;}

Si vous avez une meilleure solution (en tenant compte des impératifs décrits plus haut), je suis preneur!
Modifié par Ziltoid (08 Jan 2010 - 15:52)

Alors en vrac:

1. Tu as vraiment de largeurs et hauteurs à 100% pour tes coins? Des dimensions en pixels ne seraient pas envisageables?

2. IE6 et parfois IE7 ont quelques soucis avec le positionnement absolu par rapport à un ancêtre positionné:
- pour IE6 et 7, quand cet ancêtre n'a pas le HasLayout, le positionnement peut être un peu aléatoire;
- pour IE6 uniquement, on a parfois des décalages de plusieurs pixels qui ne s'expliquent et ne se corrigent pas vraiment (le correctif consiste alors à appliquer à IE6 un bottom: -4px plutôt que le bottom: 0 utilisé pour tous, par exemple...).

3. Ce n'est pas une correction de bug, mais ça pourrait être utile de grouper en une seule image tes quatre images de coins (technique des sprites CSS). Tu gagnes ainsi 3 requêtes HTTP, ça rend la page plus réactive.

4. Si ça ne marche pas au final sur IE6, il y a une solution très simple et parfaitement saine qui consiste à... retirer cet effet cosmétique pour IE6.
Modifié par Florent V. (08 Jan 2010 - 21:39)

1 & 3 ) Je ne connais pas les dimensions finales des images. Mon but était d'avoir des encadrements qui s'adaptent tous seul à n'importe quelles tailles d'image...

Néanmoins je suis en train de me dire que je pourrais connaître les tailles côté PHP : regarder les dimensions de chaque image à encadrer (getimagesize), et rajouter des "style=" dans le HTML pour forcer les dimensions en pixels...
Après c'est peut-être pas super propre au niveau du code généré, mais bon...

2 ) Les choses se passent en faites comme ceci :
Pour tous les navigateurs, je dois rajouter sur mon div "cadre" un float:left, car comme je n'ai pas de dimensions définies en pixels, les span à l'intérieur étirent leur div parent à 100%. Ainsi en ajoutant un float:left le div et les spans font la même taille que l'image.
Or IE6 me place les spans comme si le div "cadre" n'avait pas cette propriété float:left et qu'il occupait donc 100%...

4 ) Je suis obligé de faire des coins arrondis, la personne pour qui je fais le site souhaite que le rendu soit identique sur tous les navigateurs et que sa maquette soit respectée.
A ce moment-là je préfère encore mettre un javascript qui imite un border-radius...
C'est juste que je voulais savoir si on ne pouvait pas le faire uniquement avec du CSS 2, un petit défi en quelques sortes!

Ziltoid a écrit :
1 & 3 ) Je ne connais pas les dimensions finales des images. Mon but était d'avoir des encadrements qui s'adaptent tous seul à n'importe quelles tailles d'image...

Mais s'il s'agit de coins, et que les images pour ces coins ont des dimensions précises, tu devrais pouvoir créer des SPAN de dimensions précises et les placer qui en top:0;left:0, qui en bottom:0;right:0, etc.

Le calcul des dimensions d'images en PHP n'aura un intérêt qu'en dernier recours, si vraiment tu dois obtenir le même rendu dans IE6 et qu'aucune autre solution ne prend.

Ziltoid a écrit :
je dois rajouter sur mon div "cadre" un float:left, car comme je n'ai pas de dimensions définies en pixels, les span à l'intérieur étirent leur div parent à 100%.

Strictement aucun rapport avec la présence des SPAN. Ce que tu décris, c'est le comportement de n'importe quel élément en display:block lorsqu'il n'est pas flottant ou positionné en absolu: il prend toute la largeur disponible dans son parent.

Ziltoid a écrit :
Je suis obligé de faire des coins arrondis, la personne pour qui je fais le site souhaite que le rendu soit identique sur tous les navigateurs et que sa maquette soit respectée.

Si la personne en question est un ami (service rendu), lui dire que non, ça va pas être possible et qu'il se calme. Si besoin, lui mettre un coup de marteau sur la tête.

Si la personne en question est un client, penser à facturer le temps supplémentaire nécessaire pour faire rentrer IE6 dans le rang. Pour un design relativement simple, la correction de bugs IE6 devrait faire partie de la prestation d'intégration, mais il ne faut surtout pas garantir un rendu identique dans tous les navigateurs (ça n'existe pas), et il est préférable d'avertir sur le fait qu'on traitera IE6 en «dégradation gracieuse» lorsque nécessaire. On peut ensuite proposer une option de compatiblité complète IE6, à estimer après analyse de la maquette et des interactions (effets JavaScript).
Ici, c'est le prix de l'option (à ne pas sous-estimer ) qui joue le rôle du coup de marteau sur la tête.