Un bloc adaptable à un contenu dynamique

Hello !

Alors malgré le titre, il ne s'agit pas d'un design et les techniques habituelles ne fonctionnent pas.
Explication: je suis entrain de créer un module pour un service de documentation permettant de choisir des articles dans un magazine et de les demander.
Pour cela, j'ai mis un "Post It" qu'on balade sur la page pour passer commande.
Comme je ne sais pas le nombre d'articles qu'une personne peut demander, j'ai mis un lien permettant de rajouter des champs au formulaire.
Donc je peux avoir 25 lignes comme 3...

http://www.macon.fr/images/alsa01.jpg

Sur IE mon bloc post-it s'adapte naturellement au contenu, mais sous FF mon contenu passe par dessus...
J'ai essayé pas mal de truc (height: 100%; overflow: auto;...) sans trop trouver de solution.

Voici les bouts de code

#postit
{
position: fixed !important;
position: absolute;
width: 200px;
height: 200px;
background-color: #FFFF66;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
padding: 5px;
/*overflow: auto;*/
}

<p class="ajout_mag">
<a href="javascript:AjoutArticle('ajout_page');">Ajouter un article</a>
</p>
<div id="ajout_page">
<a href="javascript:SauveArticles();"><img src="images/filesave.png" alt="Sauver" width="22" height="22" /></a>
</div>

Salut,

Je pense que c'est à cause de ton "height:200px;"
Si tu mets "min-height:200px;" pour firefox, ca devrait marcher.
Et il faut garder ton height:200px; uniquement pour ie.
Modifié par Oryo (04 Sep 2007 - 09:15)

Ca ne fonctionne pas... malheureusement

Sinon j'ai une solution krabeurk qui consiste à fixer la taille dans la balise div et de demander à mon JS d'ajouter +20 à cette taille quand on clique dessus, mais bon...
Il suffit de grossir la taille des caractères pour que ça ne fonctionne plus...
Modifié par BruceFeuillette (04 Sep 2007 - 09:49)

#postit   {
position: fixed !important;
position: absolute;
width: 200px;
height: 200px;
background-color: #FFFF66;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
padding: 5px;
}
html>body #postit {
height:auto;
min-height:200px;
}

Peut-être comme ceci ?

Pas plus
J'ai même tenté un bloc "spacer" avec un clear: both; positionné avant la balise de fermeture de mon div, mais rien...

Dans un sens ce n'est pas super vital, 99% de mes utilisateurs sont sous IE6 ou 7, on doit être 3-4 à avoir Firefox.