28172 sujets

CSS et mise en forme, CSS3

IE 7 ... display: inline-block; C'est la misèèèère !

Bonjour a tous , non je ne suis pas entrain de cracker , je suis juste fatigué de cette daube de ie ... je vais pas créer un nouveau mouvement contre ces navigateurs (il y en a déjà trop ...) mais je vais simplement vous présenter mon problème , a près tout c'est surement moi la daube Smiley bawling .

Voici mon CSS :

.table1 {
width:230px;
height:396px;
border: 1px solid #a2a2a2; 
display: inline-block;
margin-left:10px;
}

.ref {
background-color:#d2d0d0;
text-align:left;
float:left;
width:120px;
height:31px;
line-height:31px;
border: 1px solid #a2a2a2; 
border-left:none;
border-top:none;
display: inline;
margin-top:0px;
padding-left:5px;

}

.prix {
float:right;
background-image: url(Theme/prix.png);
margin-top:-20px;
margin-right:-20px;
width:79px;
height:61px;
line-height:61px;
font-family:Tahoma, Verdana, Geneva;
font-size:14px;
color:white;
display: inline-block;

}


Et voici mon html : 

<div id="Contenu">

	<div class="table1">
		<div class="prix">
		20.10 €
		</div>
		<div class="ref">
		Réf :<span style="color: #3670f3;"> 011111</span>
		</div>
	<br><img style="width: 180px; height: 230px;" alt="separation" src="05013.jpg" />
	<a href="image.jpg" class="zoomer"  rel="lightbox" title="titre">+ Zoomer</a> 
	<br>
	<p style="text-align:left";>Descriptions :<span style="color: #3670f3;">Volute en S decale 350x110 (16x6)</span> </p>
	<br>
	<a href="#" class="button orange">Demande de devis</a>
	</div>
</div>


Sur IE9 et 8 pas de probleme (J'espere Smiley eek )
Mais en dessous de ces versions , les tables s'affichent les unes en dessous des autres ...

Voici le résultat sur ie :

http://img638.imageshack.us/img638/1065/sanstitre3uo.jpg

Voici le résultat recherché :

http://img403.imageshack.us/img403/1074/sanstitre2jz.jpg

Docteur , que dois-je faire ?
Modifié par remif (21 Jan 2011 - 11:01)
Essayes çà :


.table1 { 
width:230px; 
height:396px; 
border: 1px solid #a2a2a2;  
display: inline-block;
*display: inline; /* IE < 8 */
*zoom : 1; /* IE < 8 : à tester pas forcement nécessaire */
margin-left:10px; 
}


Pas sur qu'appeler une DIV table soit une bonne idée pour le débogage futur...

http://covertprestige.info/css/inline-block/

ps : oublies pas de fermer ton BR
Modifié par rs459 (21 Jan 2011 - 11:40)
bonour,

pour le: 
display:inline;zoom:1;

Il vaut mieux le servir clairement seulement a IE7 et moins a l'aide des commentaires conditionnels, c'est au moins un truc de bien de chez de MSIE que de pouvoir ciblé telle ou telle version.

cordialement,
GC
Chacun son style, personnellement j'ai une nette préférence pour ce style commentaire conditionnel. C'est pas valide CSS validator, mais je m'en tape quand je reprends mon code 5ans plus tard je sais qu'il y a une nécessité de prendre en compte les bugs IE, alors que dans un css séparé c'est pas toujours évident.

Aprés je sais Microsoft déconseille , c'est pas valid CSS, mais ça facilite la maintenance.

Autre solution réferençer les bugs via un commentaire qui renvois vers la feuille IE, et Effectivement procéder de cette manière (feuilles séparées IE).
Modifié par rs459 (21 Jan 2011 - 13:05)
Effectivement c'est quand même plus propre. Après en terme de pérennité vous pensez vraiment que Microsoft les enlèvera un jour ces Hacks ?

J'y verrais juste un seul défaut, quand tu bosses avec des "fainéants" qui savent pas lire 10 lignes plus bas Smiley lol
:) , justement quand il y a devoir faire avec des fainéants ou moins compétent, il vaut mieux se blinder le plus simplement possible.

par exemple:
<div class="inline-block"></div>

feuille comune:
.inline-block {display:inline-block;}

feuille chargée dans les commentaires conditionnels pour lte IE 7 :
.inline-block {display:inline;zoom:1;}


la feuille peut-etre zappée ou oublié tant que l'on ne s'amuse pas a redéfinir dans la feuille commune inline-block en display:autre-chose;

Le commentaire conditionnel est une valeur sure, facile a appréhender et a ecrire, les hacks sur syntaxe ne sont pas des soluces pérennes et plus difficiles a manier pour les moins avertis.

Pis pour ceux qui ne sont pas pro IE, je dirais : on ne mélange pas les torchons avec les serviettes Smiley smile

mon humble avis , cordialement

GC
Sujet clos
Aller à