Aller au contenu

Marge en haut et marge à gauche


Tchesko

Sujets conseillés

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... :angry:

A votre bon coeur... :whistling:

Lien vers le commentaire
Partager sur d’autres sites

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. :wacko: Il doit bien y avoir aune autre solution moins acrobatique non? <_<

Lien vers le commentaire
Partager sur d’autres sites

Euh... :whistling:

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

	display: inline;

:blush:

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 :unsure:

Modifié par Tchesko
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...