freed102 a écrit :
... et la question est....
Comment faire pour que sur FF et ses copines ce soit comme sur IE ??
|
Il est tout à fait normal que FF t'affiche ceci:
En plaçant le contenu en float:left, le contenu de celui-ci ne se déroule plus dans le flux normal. Pour le conteneur, il n'y a donc plus de hauteur de contenu. Pour y remédier, si tu n'as pas d'autres infos à l'intérieur du cadre, tu supprimes le float qui ne sert à rien et ton problème disparaîtra.
Exemple avec code simplifié:
#postit { width:148px;
border: 1px solid #CCCCCC;
padding:1px;
margin-bottom:10px;}
#postit p { margin:0;
padding:5px 15px;
background-color:#F8ECDF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;}
.post_it_texte_orange {color: #FF6600;}
#postit b { font-size: 14px;}
<div id="postit">
<p>Vous possédez<br />
<b>5 460</b> <span class="post_it_texte_orange">points</span></p>
</div>
|
Si tu as plusieurs infos de ce genre à mettre à l'intérieur du cadre (mais vraisemblabement pas puisque tu as mis un id à ton postit_inside et non un class ) et donc que le float s'avère nécessaire, 2 options pour placer l'indispensable clear:both (ou clear:left ou clear:right selon les cas) qui indique au conteneur de s'allonger jusqu'au bas des float:
1) Tu indiques au conteneur qu'il doit se clearer en bas; mieux du point de vue définition puisqu'on n'agit que sur le CSS, mais pas sûre de la compatibilité avec IE5 mac:
div#postit:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
} |
hack pour IE si ça ne suffit pas:
* html .postit {height: 1%;} |
2) l'ajout d'un <div style="clear:both;"><div> vide en-dessous des float juste avant la fermeture du conteneur
Le clear:both pouvant s'appliquer à n'importe quel élément dans le flux normal, se trouvant au dessous des flottants, dans le même container.