Fausse popup CSS : comment forcer IE à respecter une largeur variable?

Bonjour,

Alors après des heures d'essais divers et de recherches infructueuses, je me résous à vous soumettre une problématique qui a piqué ma curiosité.

Etant données des fausses popup gérées par CSS et javascript dans un site centré horizontalement dans la fenêtre.
Ces fausses popup sont des div en position absolute, positionnées dans une div en position relative permettant aux fausses popup d'être positionnées où je veux et en même temps de dépendre du centrage de la page et de bouger avec le reste du site si on agrandit ou on réduit la fenêtre.

Ces fausses popup ont un contenu dynamique géré par Spip. Ce contenu comporte du texte (un titre) et une image (coupure de presse). Les images peuvent avoir des tailles très variables. Elles contiennent aussi une petite croix qui permet de fermer ces popup. Cette petite croix est une image dans une div flottant à droite pour se caler dans l'angle droit de la fausse popup.

Le javascript qui permet de piloter ces fausses popup m'oblige à :
- les mettre en display: none
- à leur donner une id et non de les passer en classe

Voici ce que cela donne sur les navigateurs qui respectent le rendu :

http://img262.imageshack.us/img262/2205/image6i.jpg

Sur IE, si je ne mets pas de largeur, juste des padding, la div s'élargit bien pour l'image puisque les bordures s'écartent bien mais clairement par pour le texte :

http://img205.imageshack.us/img205/7568/largeur.jpg

Si je hack et mets des min_width et width pour IE, je peux retrouver un titre à peu près normal mais alors impossible de positionner la croix pour fermer dans l'angle car pour IE l'angle semble être au bout de la min_width et non au bout de la width qu'il affiche (le bout de l'image) :

http://img401.imageshack.us/img401/6438/largeur2.jpg

Voici un extrait de la feuille de style avec les hack (puisque je me suis arrêtée à cet essai) avec dans l'ordre la div qui permet de positionner les fausses popup, une div de fausse popup, et la div avec la croix pour fermer la popup :

div#accroche_coupures {
	position: relative;
	height: 1px;
	width: 1px;
	left: -200px;
	z-index: 300;
}


div#bloc_presse1 {
	top: 150px;
	padding: 10px;
	position: absolute;
	z-index: 210;
	text-align: left;
	border: 2px solid #70666C;
	display: none;
	background-image: url(../../images/px-transparence.png);
	background-repeat: repeat;
	margin-left: 25px;
	/min-width: 300px;
	_width: 300px;
}

.presse_fermeture {
	float: right;
	padding-right: 2px;
	padding-top: 2px;
	z-index: 100;
	margin-top: 3px;
	margin-bottom: 5px;
	margin-right: 3px;
	/width: 7px;
	/height: 7px;
}

Et voici le lien - par contre c'est le site d'une boutique mais qui n'est pas encore officiellement ouverte (la page d'accueil ne permet pas d'y accéder encore) donc merci de ne rien commander dans la boutique qui est en phase de tests finaux : http://ho-scandinavia.com/spip.php?rubrique37

Alors maintenant je vous soumets tout ça parce qu'initialement et spontanément je n'avais pas mis de width juste des padding vu que la largeur était variable. Et ça a très bien réagit sous Firefox & co.
Mais comme je suis obligée de mettre des id différentes pour chaque fausses popup, je pourrais tout à fait donner une largeur fixe à ces div puisque du coup je connais la taille de l'image que chaque fausse pop up affiche. Mais ma curiosité a été piquée au vif et j'aurais aimé trouver une solution qui permette de faire afficher une largeur dépendant du contenu à IE aussi.
D'autant que je continue à trouver cette solution plus rapide pour moi car elle ne m'obligerait pas à noter et rapporter dans la feuille de style la largeur de chaque coupure de presse.

Maintenant si ça n'est vraiment pas possible, je mettrai une largeur fixe...

Merci d'avance
Modifié par missme (30 Apr 2009 - 20:12)