[CSS] Problème de CSS avec Firefox, mais pas avec Opera ou IE.

Problème de CSS avec Firefox, mais pas avec Opera ou IE. [CSS] - HTML/CSS - Programmation

Marsh Posté le 21-12-2005 à 22:59:37    

:hello:
 
Un souci de CSS avec Firefox. J'ai pour habitude de rencontrer plutôt des problèmes avec IE, mais la rien à faire, ca fonctionne sur Opera et IE, mais pas sur Firefox.
 
J'ai en fait 3 cadres (gauche, droite, footer) contenu dans un conteneur.
Le cadre de droite a la particularité d'avoir une hauteur minimum de 500 px, sinon plus suivant ce qu'il contient.
 
Voici un extrait de mon code CSS :

Code :
  1. #conteneur {
  2. width: 750px;
  3. margin: 10 auto;
  4. text-align: left;
  5. border-width: 3px;
  6. border-style: solid;
  7. border-color: #FFFFFF;
  8. }
  9. #gauche {
  10. float: left;
  11. width: 15%;
  12. height: auto important!;
  13. height: 500px;
  14. min-height: 500px;
  15. background-color: red;
  16. }
  17. #droite {
  18. float: left;
  19. width: 85%;
  20. height: auto important!;
  21. height: 500px;
  22. min-height: 500px;
  23. background-color: blue;
  24. }
  25. #footer {
  26. width: 100%;
  27. background-color: green;
  28. }


 
Et voila ce que j'obtiens avec les 3 navigateurs lorsque le contenu du cadre de droite est suffisament important pour donner une hauteur du cadre supérieur à 500px :
 
Opera :
http://pix.nofrag.com/44/ff/ba06e158d1558a5146d5d3a42741.png
 
IE:
http://pix.nofrag.com/10/f3/24ce99a0d9d3304e126c8125b7ea.png
 
Firefox :
http://pix.nofrag.com/2d/03/ad0652d31e1588ee60590d6784df.png
 
Une idée ? :??:
 
Merci :jap:

Reply

Marsh Posté le 21-12-2005 à 22:59:37   

Reply

Marsh Posté le 21-12-2005 à 23:11:26    

Y'a t'il quelque chose au dessus du conteneur? Si oui la hauteur du #droite ne correspondrait il pas à la hauteur de ce que tu vois avec firefox + la hauteur de ce qu'il y'a au dessus? Si c'est ça essaye de voir ce que ca donne en donnant une position relative à #droite pour voir

Reply

Marsh Posté le 21-12-2005 à 23:25:16    

Nop, il n'y a rien au dessus du conteneur.
 
Il y a en réalité juste un 4ème cadre (header) avant ces 3 la, qui se trouve à l'interieur du conteneur, mais il ne jout aucun rôle dans le problème je pense.
 

Code :
  1. #header {
  2. padding: 5px;
  3. background-color: yellow;
  4. }

Reply

Marsh Posté le 22-12-2005 à 00:24:58    

Face_Off a écrit :

Nop, il n'y a rien au dessus du conteneur.
 
Il y a en réalité juste un 4ème cadre (header) avant ces 3 la, qui se trouve à l'interieur du conteneur, mais il ne jout aucun rôle dans le problème je pense.
 

Code :
  1. #header {
  2. padding: 5px;
  3. background-color: yellow;
  4. }



Essayes de le retirer le temps d'un test, pour être sur qu'il n'a rien à voir avec le problème (si tout s'affiche pareil dans les 3 navigateur), car sinon ça voudra dire que c'est la gestion du positionnement du #header + celle du #droite qui est en cause et pas un problème de gestion de hauteur dans firefox. Ca t'aiguillera dans les modifs à faire pour que ça marche comme tu souhaites.  
Ayant déjà eu des problèmes de ce type, c'est ce qu'il me semblerait le plus probable

Reply

Marsh Posté le 22-12-2005 à 00:31:28    

Voila je viens de tester.
Toujours le même problème.

Reply

Marsh Posté le 22-12-2005 à 08:49:56    

Pourquoi as-tu height et min-height, je croyais que c'était la même chose.
Ce doit être cela qui ne plaît pas à Firefox qui ne sait plus quoi faire.


Message édité par CNeo le 22-12-2005 à 08:50:46
Reply

Marsh Posté le 22-12-2005 à 10:38:29    

Et puis y'a deux height :o

Reply

Marsh Posté le 22-12-2005 à 11:26:48    

Vous parlez de ça je suppose :
height: auto important!;
height: 500px;
min-height: 500px;
 
C'est bien simple, je veux avoir une hauteur minimale de 500 pixels, et plus suivant le contenu.
 
Pour cela, il me suffit d'indiquer min-height: 500px;
Le problème, c'est que IE ne reconnait pas min-eight (et ouais c'est con IE), et l' "astuce" permettant de palier ce probleme est de lui indiquer à la place un height: 500px; qui se comporte pour IE comme un min-height:500px;
Par contre, le fait d'ajouter un height:500px; oblige de preciser un height:auto; pour les autres navigateurs (Opera et FF) grace à un hack CSS (le important!; ).
 
Ainsi IE ne verra et ne comprendra que :
height: 500px; (interprété de la même manière qu'un min-height: 500px; )
 
Et les autres navigateurs ne verront et ne comprendront que :
height: auto;
min-height: 500px;
 
Maintenant je suis pas un expert en CSS, je dis peut être des bêtises, mais ma méthode semble correct et valide d'après ce que j'ai pu lire sur le net ;)


Message édité par Face_Off le 22-12-2005 à 11:29:01
Reply

Marsh Posté le 22-12-2005 à 11:59:33    

Oui mais quand tu mets height : 500px, firefox met le height à 500 px, ce qui est normal...
 
Bon alors, problème résolu?

Reply

Marsh Posté le 22-12-2005 à 12:28:44    

Justement je ne crois pas.
Firefox doit réagir comme Opera et prendre en compte height:auto; (car il y a le important!; ) et ignorer la valeur de height qui suit.
 
Bon, c'est simple, je vais retester en virant les height et je vous dis ce que ca donne.

Reply

Marsh Posté le 22-12-2005 à 12:28:44   

Reply

Marsh Posté le 22-12-2005 à 12:34:34    

Ha oui effectivement, il n'y a plus le problème en virant les heights.
Bizarre ca :heink:
 
Sauf que bien entendu, je n'ai plus de hauteur minimum sur les 3 navigateurs ce qui ne vas pas du tout.
Quelqu'un aurait une idée pour réaliser ce que je veux faire et de sorte à ce que ça fonctionne sur les 3 navigateurs ? :??:

Reply

Marsh Posté le 22-12-2005 à 12:57:41    

Face_Off a écrit :

Ha oui effectivement, il n'y a plus le problème en virant les heights.
Bizarre ca :heink:
 
Sauf que bien entendu, je n'ai plus de hauteur minimum sur les 3 navigateurs ce qui ne vas pas du tout.
Quelqu'un aurait une idée pour réaliser ce que je veux faire et de sorte à ce que ça fonctionne sur les 3 navigateurs ? :??:


 
A priori ton problème vient du fait qu'IE interprète le CSS comme un sagouin. Donc tu lui précise la hauteur de la sorte : * html #droite{height:500px;} , après avoir codé le CSS #droite (pour les autres navigateurs),  histoire qu'il n'y ait qu'IE à le lire.

Reply

Marsh Posté le 22-12-2005 à 13:03:12    

Nickel !!! :bounce:
 
Merci :jap:
 

Code :
  1. #gauche {
  2. float: left;
  3. width: 15%;
  4. background-color: red;
  5. }
  6. #droite {
  7. float: left;
  8. width: 85%;
  9. min-height: 500px;
  10. background-color: blue;
  11. }
  12. * html #droite {
  13. height:500px;
  14. }

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed