Jump to content
Sign in to follow this  
Tchesko

Marge en haut et marge à gauche

Rate this topic

Recommended Posts

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:

Share this post


Link to post
Share on other 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? <_<

Share this post


Link to post
Share on other 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:

Edited by Tchesko

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...