28173 sujets

CSS et mise en forme, CSS3

[Résolu]Aucune marge en principe, mais des marges sous IE tout de même

Salut à tous!

Pour un site pro que je suis en train de refaire, j'ai une page devant afficher toutes les fiches disponibles pour la rubrique demandée. Ces fiches sont des blocs avec bordures et aucune marge verticale n'est appliquée. Sous Firefox et Opera, il n'y a rien à dire: mes désirs y sont des ordres; en revanche, sous IE (et, pour une fois, les version 6 et 7 sont dans le même panier), mes désirs y font désordre puisque de la marge verticale y est appliquée (d'après les captures d'écran, il y a 15 pixels d'écart entre les blocs).

upload/8630-sans-marge-.jpg upload/8630-marge-ie6.jpg upload/8630-marge-ie7.jpg

Voici le code XHTML appliqué à ces blocs:

  <div id="contenu">
    <h1>Animalerie - Accessoires</h1>
    <ul id="liste-fiche">
      <li>
        <ul class="liste-enseigne">
          <li class="enseigne-nom">Cat &agrave; dog</li>
          <li><img src="images/secure-01.gif" alt="Paiement s&eacute;curis&eacute;" /> Paiement s&eacute;curis&eacute; <img src="images/livraison-01.gif" alt="Livraison 24/48h" /> Livraison 24/48h</li>
        </ul>
        <ul class="liste-fiche-enseigne">
          <li><img src="images/logo-cat-a-dog.jpg" alt="Cat &agrave; dog" /></li>
          <li><a href="animalerie,accessoires,cat-a-dog.html">En savoir plus</a></li>
          <li>ou</li>
          <li><a href="http://www.catadog.fr">visiter la boutique</a></li>
        </ul>
        <ul class="liste-fiche-donnees">
          <li><strong>RCS&nbsp;:</strong> Alen&ccedil;on 342728714</li>
          <li><strong>E-mail&nbsp;:</strong> mesly*at*catadog.fr</li>
          <li><strong>Positionnement&nbsp;:</strong> sp&eacute;cialiste</li>
          <li>c&oelig;ur &agrave; prendre</li>
        </ul>
      </li>
      <li>
        <ul class="liste-enseigne">
          <li class="enseigne-nom">Enseigne</li>
          <li><img src="images/secure-01.gif" alt="Paiement s&eacute;curis&eacute;" /> Paiement s&eacute;curis&eacute; <img src="images/livraison-01.gif" alt="Livraison 24/48h" /> Livraison 24/48h</li>
        </ul>
        <ul class="liste-fiche-enseigne">
          <li><img src="images/logo-enseigne.jpg" alt="Enseigne" /></li>
          <li><a href="animalerie,accessoires,enseigne.html">En savoir plus</a></li>
          <li>ou</li>
          <li><a href="http://www.w3.org">visiter la boutique</a></li>
        </ul>
        <ul class="liste-fiche-donnees">
          <li><strong>RCS&nbsp;:</strong> Nanterre 1234567890</li>
          <li><strong>E-mail&nbsp;:</strong> bvlpllg-z*at*yahoo.fr</li>
          <li><strong>Positionnement&nbsp;:</strong> g&eacute;n&eacute;raliste</li>
          <li>hkh</li>
        </ul>
      </li>
    </ul>
    <ul id="navigation-fiche">
      <li>2 fiches<span class="noprint"> - </span></li>
      <li><span class="noprint"><a href="animalerie.html">Retour &agrave; la liste des rubriques</a> - </span></li>
      <li><span class="noprint">&lt; Pr&eacute;c&eacute;dent - </span></li>
      <li><span class="noprint">1 - </span></li>
      <li><span class="noprint">Suivant &gt;</span></li>
    </ul>
  </div>


Et voici le CSS les concernant de près ou de loin:

/* Mise en page générale */
body {
  font: normal 0.75em Arial, Helvetica, sans-serif;
  color: black;
  background: white;
  padding: 0;
  margin: 0;
}
h1, h2, h3 {
  font-weight: bold;
  text-align: center;
  padding: 2px 5px;
  margin: 0;
}
h1, h2 {
  color: #FF6500;
  background: white;
}
h1 {
  font-size: 2em;
}
h2, h3 {
  font-size: 1em;
}
img {
  margin: 8px 0 5px;
  border: 1px solid #D4D4D4;
}
a {
  text-decoration: none;
  color: #1055AD;
  background: white;
}
a:hover {
  text-decoration: underline;
}

/* Contenu central */
#contenu {
  text-align: center;
  padding: 0;
  margin: 5px 160px 0;
}

/* Liste des fiches des enseignes */
#liste-fiche, #liste-fiche-admin {
  padding: 0;
  margin: 0 15px;
  list-style: none;
}
#liste-fiche li {
  padding: 0;
  margin: 0;
}
#liste-fiche img, #liste-fiche-admin img {
  vertical-align: middle;
  border: none;
}
#navigation-fiche {
  color: #1055AD;
  background: #F1F3F4;
  padding: 0;
  margin: 0 10px;
  border: 1px solid #D4D4D4;
  list-style: none;
}
#navigation-fiche li {
  display: inline;
  padding: 0;
  margin: 0;
}
#navigation-fiche a {
  color: #1055AD;
  background: #F1F3F4;
}
.liste-enseigne {
  color: black;
  background: #F1F3F4;
  text-align: justify;
  padding: 0;
  margin: 0;
  border: 1px solid #D4D4D4;
  list-style: none;
}
.liste-enseigne li {
  display: inline;
  padding: 0;
  margin: 0;
}
.enseigne-nom {
  font-weight: bold;
  color: #FF6500;
  background: #F1F3F4;
}
.liste-fiche-enseigne {
  padding: 0;
  margin: 0;
  border-right: 1px solid #D4D4D4;
  border-left: 1px solid #D4D4D4;
  list-style: none;
}
.liste-fiche-enseigne li {
  display: inline;
  padding: 0;
  margin: 0;
}
.liste-fiche-donnees {
  text-align: justify;
  padding: 5px;
  margin: 0;
  border-right: 1px solid #D4D4D4;
  border-bottom: 1px solid #D4D4D4;
  border-left: 1px solid #D4D4D4;
  list-style: none;
}
.liste-fiche-donnees li {
  padding: 0;
  margin: 0;
}

Modifié par Victor BRITO (09 Nov 2006 - 18:30)
Salut!

Cygnus a écrit :
Petite question : es-tu certain que l'espace indésirable provient du div#contenu ?
Pour ma part, j'aurais plutôt tendance à penser qu'il découle de ton header. Smiley rolleyes


En essayant margin: 0 160px; ça ne résoud pas le problème.

Cygnus a écrit :
As-tu donné des background colorés pour essayer de voir d'où peut provenir ton problème comme indiqué dans la FAQ :
Comment régler les problèmes classiques de marges, d'espaces et de décalages ?


En colorant les blocs non colorés, je constate que la marge entre les deux fiches laisse paraître la couleur de fond de l'élément div#contenu.
Victor BRITO a écrit :
En colorant les blocs non colorés, je constate que la marge entre les deux fiches laisse paraître la couleur de fond de l'élément div#contenu.

Continue ta recherche pour trouver de quelle partie cela provient alors ... Smiley langue
J'ai cru remarquer que tu as un certain nombre de listes...
Et par défaut les <ul> et <li> ont tous deux des marges Smiley cligne
Modifié par Cygnus (09 Nov 2006 - 12:27)
Salut!

Finalement, j'ai résolu le problème.

Tout était dans l'élément liste-fiche, qui réclamait la modification suivante:


#liste-fiche li {
  display: inline;
  padding: 0;
  margin: 0;
}


IE 6 et 7 suppriment les marges inutiles. Du coup, pour rétablir l'affichage sous forme de blocs, j'ai ajouté ce code:


#liste-fiche ul li {
  display: block;
}


Du coup, tout ce qui était affiché en ligne à l'intérieur se ne peut plus utiliser display: inline, mais, au vu du résultat, ce n'est pas grave.
Sujet clos
Aller à