[CSS] pb espacement sous div IE !

Bonjour,

Je cherche a faire un affichage avec une image au dessus et en dessous d'un titre.
Je me suis donc orienté vers le code html suivant :

      
<div class="paragraph_title_top">&nbsp;</div>
<div class="paragraph_title">
  Test
</div>
<div class="paragraph_title_bottom">&nbsp;</div>

Voici donc des contraintes que je met dans ma css :

div.paragraph div.paragraph_title_top{line-height:2px; width:196px; background-color:red;}
div.paragraph div.paragraph_title{line-height:15px; width:196px; background-color:#eaeaea;}
div.paragraph div.paragraph_title_bottom{line-height:2px; width:196px; background-color:blue;}

Le problème c'est que firefox met bien mes div top et bottom a 2px de hauteur, mais IE me met un espace apresles div top et bottom!

Quelqu'un a une idée pour éviter d'avoir cet espacement sous IE ?

Je précise que j'ai essayé de forcer les margin et padding a 0, et que j'ai collé toutes les balises dans mon code HTML mais rien n'y fait.

Merci

PS: en solution temporaire, j'ai mis une image de callage transparente de 2px de hauteur.
Modifié par Hermann (30 Apr 2008 - 18:26)

Bonsoir,
que de complications...
Utiliser un balisage sémantique (titres Hn) et non un div trop générique.
Tu peux par exemple tout remplacer par

<h1>Test</h1>

h1 {
    border-top: 2px solid red;
    border-bottom: 2px solid blue;
    line-height:15px;    
}

Si possible éviter de mettre une largeur pour que les bordure s'allongent à l'agrandissement du texte.
Pourquoi line-height:15px?
Modifié par Hermann (30 Apr 2008 - 18:26)

Mouarf, je retrouvais plus mon post, mais apparemment je l'avais posté dans la mauvaise rubrique, dsl.

Merci Hermann pour ta solution avec le border bleu en haut et en bas, mais elle correspond a mon code 'exemple' mais pas à ce que j'avais demandé, c'est à dire comment mettre une image en background dans chaque coin, ex:

background: grey url('image_de_fond.png') no-repeat left top;
background: grey url('image_de_fond.png') no-repeat right top;
background: grey url('image_de_fond.png') no-repeat left bottom;
background: grey url('image_de_fond.png') no-repeat right bottom;

Bien entendu, créer 4 div autour de mon élément en spécifiant une class pour chaque coin ne me parait pas plus propre que le tableau, ai-je tort ?

Je n'ai peut être pas assez détaillé ce que je voulais faire, et vous comprendrez tout dessuite avec cet exemple de code, qui correspond à ma solution en HTML mais pas en CSS, bref c'est pas beau du tout

              
<table cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="width:2px; height:2px;"><img src="images/title_top_left.gif" /></td>
      <td style="width:100%"></td>
      <td style="width:2px; height:2px;"><img src="images/title_top_right.gif" /></td>
    </tr>
    <tr>
      <td colspan="3" class="title"><a href="#">Titre du premier niveau </a></td>
    </tr>
    <tr>
      <td style="width:2px; height:2px;"><img src="images/title_bottom_left.gif" /></td>
      <td></td>
      <td style="width:2px; height:2px;"><img src="images/title_bottom_right.gif" /></td>          
    </tr>
  </tbody>
</table>

En gros, je veux un titre, encadré mais avec des arrondis dans les coins.

(ce code est dans un bloc de navigation fait avec des <ul><li>, voila pourquoi je n'utilise pas de <h1>.
Modifié par RoD69 (05 May 2008 - 13:59)

as tu essayé de préciser à tes div (ou autres) contenant les &nbsp; un line-height:2px et un font-size:2px; ? Par défaut explorer prend la hauteur minimale des boites comme la hauteur ou la taille d'un texte hypothetique.
Modifié par trouille2 (06 May 2008 - 15:57)