28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

De manière étonnante c'est IE 6 et IE 7 qui affiche exactement ce que je veux et pas firefox, safari ou opera ce qui me laisse àpenser qu'il y a une erreur quelque part dans mes CSS

J'ai une marge entre 2 blocks qui ne veut pas s'afficher sur ces navigateurs voici le code html épuré.



Code :

<h2>Titre 1</h2>
<img src="image/1.png" />
<div id="manco">

<dl>
 <dt>< img src="image/1.png" /></dt>
 <dd>
  <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  </ul>
 </dd>
 <dt>< img src="image/2.png" /></dt>
 <dd>
  <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  </ul>
 </dd>
</dl>

<dl>
 <dt>< img src="image/3.png" /></dt>
 <dd>
  <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  </ul>
 </dd>
 <dt>< img src="image/4.png" /></dt>
 <dd>
  <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  </ul>
 </dd>
</dl>

</div>
<p class="lien"><a href="1.php">Page 2 </a></p>
<h2>Titre 2</h2>






Et voici le code css pour ce balisage.


Code :

h2 {
font-size:12px;color: #FFFFFF;
height:19px;
padding-top:5px;
background-color:#a3a3a3;
border-top:1px solid #525252;
width:656px;
display:block;
float:left;
text-indent:5px;
border-bottom:1px solid #525252;
margin-bottom:10px;
}


#manco {
width: 700px;
display:block;
clear:both;
font-size:11px;
}
#manco dl{
float:left;
display:block;
}
#manco dl dt {
float:left;
display:block;
width:100px;
padding:3px 10px;
}
#manco dl dd {
float:left;
display:block;
width:230px;
padding:3px 0px;
}
#manco dl dd ul {
display:block;
width:230px;
list-style:none;
}
#manco dl dd ul li {
width:230px;
margin:3px 0px;
}
#manco a {
text-decoration:underline;
}


.lien {
width: 668px;
display:block;
clear:both;
text-align:right;
font-weight:bold;
font-size:11px;
margin-left:10px;
background-color:#cde6fa;
padding:5px;
margin-top:15px;
margin-bottom:15px;
border: 1px dotted #1c469d;
}






La marge entre ma div "manco" et mon <p> "lien" de 15px s'affiche bien sous IE et pas sur les autres navigateurs.
Une bonne ame pourrait elle éventuellement m'éclairer car je suis un peu perdu.

Merci d'avance,
Bonjour,

C'est à cause du clear. Il faut utiliser un padding plutôt qu'un margin, ou bien placer ce margin de 15px sur l'élément flottant.