5568 sujets

Sémantique web et HTML

[Résolu] Affichage Opéra différent des autres

Salut à vous !

Si vous affichez ce code dans les différents navigateurs Web (IE, Firefox, Safari, Chrome), vous verrez apparaître une bordure autour du fond bleu/gris en haut, à gauche et à droite.

Si vous affichez ce code sous Opéra (peu importe la version), vous ne verrez apparaître que la bordure supérieure... Comment est-ce possible et comment puis-je résoudre ce petit bug ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Bug Opéra</title>
		<style type="text/css" media="screen">
			<!--
			dd.test {
				margin: 0;
				padding: 0.25em 1em;
				background-color: #eef3f5;
				border-width: 1px;
				border-color: #8cacbb;
				border-style: dotted solid none solid;
				text-align: left;
			}
			-->
		</style>
	</head>
	<body>
		<dl>
			<dt>Mot</dt>
			<dd class="test">
				Définition 1
			</dd>
		</dl>
	</body>
</html>


edit : résolu !
Modifié par Alphonse (01 Sep 2009 - 14:34)
À tester:
dd.test { 
  border: 1px solid #8cacbb;
  border-top-style: dotted;
  border-bottom-style: none;
}

Modifié par Florent V. (01 Sep 2009 - 14:10)
Ca fonctionne.

J'ai alors rajouté les éléments de ma classe "dd.test" un à un pour me rendre compte que c'est la clé "background-color" qui vire la bordure de droite et la bordure de gauche...
Voilà, le problème est résolu, en ayant rajouté position: relative;, mais je ne comprends pas le lien de cause à effet... Florent, si t'as une idée, je suis preneur pour une explication ! Smiley cligne

Voici le code corrigé :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Bug Opéra Résolu</title>
		<style type="text/css" media="screen">
			<!--
			dd.test {
				position: relative;
				margin: 0;
				padding: 0.25em 1em;
				background-color: #eef3f5;
				border: 1px solid #8cacbb;
				border-top-style: dotted;
				border-bottom-style: none;
				text-align: left;
			}
			-->
		</style>
	</head>
	<body>
		<dl>
			<dt>Mot</dt>
			<dd class="test">
				Définition 1
			</dd>
		</dl>
	</body>
</html>
Sujet clos
Aller à