Hacks CSS pour Opera ?

Bonsoir,

J'ai développé un site avec quelques cadres. Ce cadre ressemble à sa :

http://img690.imageshack.us/img690/8517/sanstitre2jlc.jpg

Sur IE, le bas du cadre était décalé. J'ai donc mis en place un hack CSS pour IE :

<!--[if IE]>
		<link href="design/style-ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

Seulement sur Opera, il est également décalé (mais pas sur Firefox) :

http://img682.imageshack.us/img682/9379/sanstitre4pu.jpg

Existe-il un hack pour Opera, qui me permettrait de décaler mon bas du cadre de 1 pixel comme sur IE ?

Bonne soirée !

Salut !

Mmh... un bug sur Opéra et IE8, ça sent pas bon !

Il serait à mon avis plus judicieux de revoir ton code pour essayer de débusquer la petite bête.

La validation est ok ?

Bonjour,

quelle version d'Opera ? Récente ?

Il n'y a effectivement pas de raison que ce soit décalé ...
Peut-être centre-tu avec margin: 0 auto; ? Là effectivement il y a des erreurs d'arrondi possibles (pas forcément des erreurs mais disons que le résultat n'est pas le même sur chaque navigateur) et c'est assez insoluble : tu corriges quelque part c'est un autre qui se décale ... Si ton bloc est de largeur fixe, autant le décaler/centrer avec des marges, non ?

Felipe a écrit :
Peut-être centre-tu avec margin: 0 auto; ?

Ou alors avec background-position:center sur une image qui a une largeur différente de celle de son conteneur.

Comme le mentionne Felipe, pour éviter tout comportement non contrôlable (et si la largeur de ton conteneur est fixe), la meilleure solution est d'utiliser la même dimension conteneur / image, et de faire le centrage du bloc avec des marges (ou autre).
Modifié par BeliG (29 Mar 2010 - 11:27)

Oh, et éviter d'utiliser un commentaire conditionnel qui ne vise pas une ou plusieurs versions précises d'Internet Explorer. Appliquer le même correctif CSS à IE6, IE7, IE8 et IE9 (voire IE10), ce n'est pas très malin.

Bonjour,
http://www.nealgrosskopf.com/tech/thread.php?pid=20
Mais attention la pérennité de fonctionnement de ce type de hack n'est pas garantie.
Il vaut mieux comme on te l'a conseiller de revoir ton code.

Hello

Merci pour vos réponses.

J'ai un peu étudié le code, je vois pas ce qui cloche :

Le HTML :

	<div id="cadre_intra">
		<div class="box_uni">
			<div class="box_header"><p>Accès direct :</p></div>
			<div  class="box_contenu">
<p>
					<a href="nos-services.html">Nos services</a><br />
					<a href="contact.html">Me contacter</a><br />
					<a href="glossaire.html">Glossaire informatique</a><br />
					<a href="http://blog.*****.com">Blog</a><br />
			</p>								
			</div>
			<div class="box_footer"></div>
			</div>
	</div>

Et le CSS :

#cadre_intra {
	margin: 20px;
	height: 200px;
	width: 282px;
	float: right;
	text-align: center;
}
.box_uni {
	width: 282px;
}
.box_header {
	height: 50px;
	width: 282px;
	background: url("box-top.png") top center no-repeat;
}
.box_header p {
	font-size: 1em;
	color: #FFFFFF;
	margin: 0;
	padding: 15px 0 0 0;
}

.box_contenu {
	height: 140px;
	margin-left: 5px;
	margin-right: 6px;
	background-color: #ffffff;
}
.box_contenu p {
	font-size: 0.9em;
	margin: 0 5px -5px 5px;
	text-align: justify;
}
.box_footer {
	height: 27px;
	width: 282px;
	margin-left: 0px;
	background: url("box-bottom.png") top center no-repeat;
}

Dans ce que tu viens de fournir, il manque une info essentielle : la largeur des images.

En regardant le site que tu précises dans tes infos personnelles, je constate que l'image du pied fait 1px de moins que l'image du haut (box-top.png : 282px, box-bottom.png : 281px).

Le problème vient sûrement de là.

Sinon, je me permets quelques remarques concernant le site qui est en ligne :

- La technique d'alignement des blocs (wrap-cadre) n'est pas au point. Quand on réduit la largeur du viewport il se passe quelque chose de bizarre. Une technique plus fiable pour centrer horizontalement des blocs avec des largeurs fixées est d'utiliser display:inline-block, plutôt que ta méthode à base de flottants, marges négatives et positionnement relatif. Je te laisse étudier l'article de Florent à ce sujet.

- Pourquoi utiliser du code différent pour les blocs de l'entête ("Lancement des services", "Nos services" et "Le saviez-vous ?") et le bloc du contenu ("Accès direct"). Ils sont (presque ?) identiques. Si différence il y a, on peut toujours cibler en utilisant les parents ! (div#cadre .wrap-cadre pour les cadres du haut, div#contenu .wrap-cadre pour celui du contenu)

Bonsoir

Pour le pixel, je vais regarder sa en fin de semaine, là j'ai des soucis d'accès à Internet :S.

Concernant tes suggestions, oui, sur le coup j'ai utilisé des css différents, car j'avais quelques différences quand même. Mais tu as raison, je vais travailler la dessus !

Merci pour tes suggestions !

Je vous tiens au courant pour mon problème !