Marge en haut et marge à gauche

[Tchesko]

Commencons par le code :

#scd_nav{
	width: 778px;
	margin: 0px;
	border: 1px solid #000000;
}

#scd_nav dl{
	float: left;
	width: 180px;
	padding: 0px;
	border: 1px solid #000000;
	margin-left: 10px;
}

hr {
	margin: 0px;
	padding: 0px;
	height: 1px;
	clear: both;
	visibility: hidden;
}

et

<div id="scd_nav">
	<dl>
  <dt>Titre 1</dt>
  <dd>Texte à insérer</dd>
	</dl>
	<dl>
  <dt>Titre 2</dt>
  <dd>Texte à insérer</dd>
	</dl>
	<dl>
  <dt>Titre 3</dt>
  <dd>Texte à insérer</dd>
	</dl>
	<dl>
  <dt>Titre 4</dt>
  <dd>Texte à insérer</dd>
	</dl>
<hr />
</div>

Rien de très compliqué, pourtant l'exemple est assez saisissant. Sous mozilla, une marge de 10px apparait au dessus de la liste dl, sous IE elle apparait a gauche.

J'ai tenté différents hack et rien n'y fait, Je cherche donc une parade à ces 2 phénomènes...

A votre bon coeur...

[Tchesko]

Bon, comme je n'aime pas rester les bras croisés, trop longtemps, j'ai cherché une autre solution, moins sémentique mais c'est pas grave.

CSS:
hr {
	margin: 0px;
	padding: 0px;
	height: 1px;
	clear: both;
	visibility: hidden;
}

#autour{
	width: 778px;
	margin: 0px;
	padding: 0px;
	border: 1px solid #000000;
}

#a, #b, #c, #d{
	float: left;
	width: 180px;
	padding: 0px;
	border: 1px solid #000000;
	margin-left: 10px;
}

#a{
	margin-left: 5px;
}
html>body #a{
	margin-left: 10px;
}

XHTML:

<div id="autour">
<div id="a">
<h2>Titre 1</h2>
<p>Texte à insérer</p>
</div>
<div id="b">
<h2>Titre 2</h2>
<p>Texte à insérer</p>
</div>
<div id="c">
<h2>Titre 3</h2>
<p>Texte à insérer</p>
</div>
<div id="d">
<h2>Titre 4</h2>
<p>Texte à insérer</p>
</div>
<hr />
</div>

Je conclue de cette expérience qu'IE s'amuse à doubler la valeur du margin-left du premier élément float left. Il doit bien y avoir aune autre solution moins acrobatique non?

[Tchesko]

Euh...

Une petite recherche m'apprend que je peux régler le problème en ajoutant un :

	display: inline;

Au niveau de mes boites :

#a, #b, #c, #d{
float: left;
width: 180px;
padding: 0px;
border: 1px solid #000000;
margin-left: 10px;
}

Merci, http://www.positioniseverything.net

http://www.positioniseverything.net/explor...led-margin.html

Par contre, il semble que cette astuce ne fonctionne pas dans les listes dl

Modifié 1 Décembre 2004 par Tchesko

[Tchesko]

Si si ça fonctionne très bien...