CSS Div imbriqué(es ..?) et Firefox [RESOLU] merci mpop

mille excuses, erreur sur le lien... je le corrige...
Bonjour,

je suis en train de développer une petite appli de facturation en ligne pour un client, mais en dépit des tuto et exemples du site et de ses intervenants (merci mpop pour tes explications qui m'avaient bien permis d'avancer néanmoins...), là je suis en rade :
- débordement du contenu d'un(e) div par rapport à son conteneur...;
- footer qui se déplace au milieu de la page au lieu de rester en bas (malgré l'utilisation de l'astuce que j'ai trouvée grace àmpop, je crois
et..."last but not least" : un affichage différent d'un utilisateur de FF 1.5 à l'autre !! je m'explique : si je lance l'appli de mon poste RAS tout semble s'afficher correctement, et si je teste les memes pages chez d'autres utilisateurs de FF1.5 (meme versions upgradées en mai, l e3, je crois...!) là j'ai entre autre ce défaut du footer qui se décale sur le bas de la première div (et non pas de la div "conteneur"..., et un débordement du contenu hors de la div conteneur...

Je m'arrache les cheveux : ça marche ok, chez moi, mais pas chez mon client !!
mon site :
http://yatouten.jmbdev.com
Je ne comprends pas :
- ce qui peut provoquer ces différenecs d'affichage d'une install de FF à l'autre (paramêtrage identique me semble t il ...)
- comment règler le pb de ces débordements...
l'erreur est visible sur la page de saisie d'une nouvelel facture...
merci pour votre aide / conseils,
cordialement,
Jm


merci de votre aide
Modifié par JMB (18 May 2006 - 21:24)

Bonsoir,

Ton lien ne fonctionne pas (même en le recopiant dans la barre d'adresse et en le préfixant de http:// ou http://www.).

Tu n'as pas besoin d'utiliser les balises [ url=][/url] si tu ne souhaites pas donner de nom au lien ; il suffit d'utiliser l'URL telle que tu la mettrais dans la barre d'adresse. Ex : http://perdu.com

Déjà si on fait une page en hauteur 100%, ça implique un certain nombre de contraintes liées au modèle de boîte CSS et à deux ou trois autres petits détails. En gros, on donne à un conteneur une hauteur de 100%, mais par la suite il faut éviter le moindre pixel qui pourrait dépasser et forcer l'affichage d'une barre de scroll inutile.

html, body {
     height : 100%;
     margin: 0; padding: 0;
}
body {
     text-align : center;
     font-family : Verdana, Arial, Helvetica, sans-serif; /* Peu mieux faire au niveau des familles de fontes. Voir  http://web.covertprestige.info/test/00-comparaison-de-fontes-pour-le-web.html   (prendre la deuxième famille) */
     font-size : 10px; /* Et pour les grosses résolution d'écran, les malvoyants, etc. ? */
     background-color : #5398ff;
     color : #ffff33;
}
#conteneur {
     position : relative;
     min-height : 100%; /* Sinon on reste bloqué à une hauteur d'écran, même si le contenu est plus long */
     _height: 100%; /* Donne l'effet d'un min-height dans IE… pour faire les choses bien, il faudrait plutôt utiliser une feuille de style spécifique avec un commentaire conditionnel */
     margin : 0 auto;
     background-color : #666666;
     width : 700px;
     border: solid #333; /* J'ai remanié un peu pour la concision */
     border-width: 0 1px; /* Pouf, magie */
     color: inherit; /* Pas sûr du support de cette propriété par IE… */
}

Tout ceci ne suffit pas. Il faut virer l'affreux bottom: -3px qui place le footer trois pixels trop bas et provoque un scroll !

#footer {
     position : absolute;
     bottom : 0;
}

Comme ça, c'est mieux !

Pas constaté de problème de footer mal placé, sur aucune page…

JMB a écrit :
en dessous de 768 en hauteur ça déraille !!! une idée , une explication ?

Ton bloc conteneur a une hauteur de 100%. Il prend donc 100% de la hauteur de l'écran, et ne s'étend plus en hauteur (sauf sous IE qui interprète de travers l'attribut height).
En fait, il faudrait utiliser l'attribut min-height avec un min-height: 100%;, ce qui permettra d'avoir une hauteur de 100% de l'écran si le contenu est faible, sans pour autant figer le bloc.

IE ne comprend pas min-height, mais on peut utiliser height, qu'il faudra adresser à IE uniquement.