28173 sujets

CSS et mise en forme, CSS3

Fusion des marges

Bonjour, avec le code qui suit, j'obtiens des affichages différents sur le premier ensemble entre ie et firefox, les marges s'additionnent.
Par contre sur le deuxième ensemble en mettant 2 lignes sous le chapo les marges sont impeccables sur l'un et l'autre.

Si vous avez une solution merci, je m'arrache les cheveux...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style>
* {
padding:0;
margin:0;
}

body {
background:#FFF;
color:#000;
font:11px Georgia, "Times New Roman", Times, serif;
}

.contentLeftCol {
width:272px;
margin-right:20px;
background:#99FFFF;
margin:20px;
}

.pied {
color:#FFF;
padding:6px 10px;
margin-top:-3px;
margin-bottom:26px;
background:#CC6699;
}

.kakemonoSmall, .kakemonoSmallEnd {
float:left;
width:75px;
background:#CCC;
margin-bottom:10px;
}

.kakemonoSmall {
margin-right:23px
}

.kakemonoSmallEnd {
margin-right:0;
}

.kakemonoSmall dd, .kakemonoSmallEnd dd {
display:block;
height:31px;
color:#FFF;
padding:3px;
margin-top:-3px;
}
</style>
</head>
<body>
<div class="contentLeftCol">
  <h2>Titre</h2>
  <p class="pied">chapo</p>
  <dl class="kakemonoSmall">
    <dt>Titre</dt>
    <dd>Description</dd>
  </dl>
  <dl class="kakemonoSmall">
    <dt>Titre</dt>
    <dd>Description</dd>
  </dl>
  <dl class="kakemonoSmallEnd">
    <dt>Titre</dt>
    <dd>Description</dd>
  </dl>
  <p><a href="#">&gt; Tous les chefs</a></p>
</div>
<div class="contentLeftCol">
  <h2>Titre</h2>
  <p class="pied">Chapo</p>
  <dl class="kakemonoSmall">
    <dt>Titre</dt>
    <dd>Description</dd>
  </dl>
  <dl class="kakemonoSmall">
    <dt>Titre</dt>
    <dd>Description</dd>
  </dl>
  <dl class="kakemonoSmallEnd">
    <dt>Titre</dt>
    <dd>Description</dd>
  </dl>
    <dl class="kakemonoSmall">
    <dt>Titre</dt>
    <dd>Description</dd>
  </dl>
  <dl class="kakemonoSmall">
    <dt>Titre</dt>
    <dd>Description</dd>
  </dl>
  <dl class="kakemonoSmallEnd">
    <dt>Titre</dt>
    <dd>Description</dd>
  </dl>
<p><a href="#">&gt; Tous les chefs</a></p>
</div>
</body>
</html>
J'ai trouvé 1 solution un peu bancale, mais je suis quand même preneur d'une réponse plus coventionnelle.

J'ai remplacé :

.kakemonoSmall {
margin-right:23px
}

.kakemonoSmallEnd {
margin-right:0;
}


par :

.kakemonoSmall {
float:left;
margin-right:22px
}

.kakemonoSmallEnd {
float:left;
_float:none;
margin-right:0;
}
Sujet clos
Aller à