[Résolu] Ajout d'une marge à une liste sous IE

Salut à tous,

Je suis en train de réaliser une site de photos et j'en suis à la partie mis en forme et comme par hasard je rencontre un petit problème à IE.
Au niveau html, j'affiche une liste d'éléments ul sous une balise h2. Voici le code en question :

<h2>Titre 1</h2>
<ul>
 <li>Element 1</li>
 <li>Element 2</li>
 <li>Element 3</li>
</ul>

<div class="spacer></div>

<h2>Titre 2</h2>
<ul>
 <li>Element 1</li>
 <li>Element 2</li>
</ul>

<div class="spacer></div>

Et voici le code css associé :

h2 { margin: 0 0 0.5em 0; }
ul { padding: 0; margin: 0; list-style: none; }
ul li { float: left; }
.spacer { clear: left; }

Comme vous pouvez le voir, j'attribue une marge inférieure à mon élement h2 d'une valeur de 0.5em. Sous firefox, ma liste est donc bien décalé de 0.5em par rapport à Titre 1 et collée à Titre 2. Sous IE, une marge apparait entre liste et Titre 2 d'une valeur égale à la marge inférieure du h2. Ce phénonème apparait uniquement lorsque mes li sont en flottants.

Je fais donc appelle à vos connaissances pour, si possible, m'aider à comprendre cet étrange phénomène.

Merci d'avance
Modifié par ymhotepa (23 Aug 2007 - 15:36)

Hello,

Hmm déjà il te manque des guillemets à droite de tes class "spacer".

Ensuite, ajoute un height:1% à tes <ul> pour IE, ça les fera bien rerentrer dans le flux (leur seul contenu est du flottant, donc pour IE c'est comme si le <ul> "n'existait pas complétement". Avec le height:1%, le <ul> redevient "normal")

Salut,

Tymlis a écrit :
Hmm déjà il te manque des guillemets à droite de tes class "spacer".

Oups un petit oubli de ma part en recopiant le code. Ils sont bien présent dans le code source.

Tymlis a écrit :
Ensuite, ajoute un height:1% à tes <ul> pour IE, ça les fera bien rerentrer dans le flux (leur seul contenu est du flottant, donc pour IE c'est comme si le <ul> "n'existait pas complétement". Avec le height:1%, le <ul> redevient "normal")

Merci beaucoup ça marche nickel . J'avais pensé à utiliser cette astuce mais je l'avais appliquer sur les <li>.

Encore merci