Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1166 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1271582
Face_Off
Posté le 21-12-2005 à 22:59:37  profilanswer
 

: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:

mood
Publicité
Posté le 21-12-2005 à 22:59:37  profilanswer
 

n°1271585
muzzy91
Werckmeister Harmóniák
Posté le 21-12-2005 à 23:11:26  profilanswer
 

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

n°1271589
Face_Off
Posté le 21-12-2005 à 23:25:16  profilanswer
 

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. }

n°1271603
muzzy91
Werckmeister Harmóniák
Posté le 22-12-2005 à 00:24:58  profilanswer
 

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

n°1271607
Face_Off
Posté le 22-12-2005 à 00:31:28  profilanswer
 

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

n°1271640
CNeo
Posté le 22-12-2005 à 08:49:56  profilanswer
 

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
n°1271675
muzzy91
Werckmeister Harmóniák
Posté le 22-12-2005 à 10:38:29  profilanswer
 

Et puis y'a deux height :o

n°1271694
Face_Off
Posté le 22-12-2005 à 11:26:48  profilanswer
 

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
n°1271716
durkheim
Posté le 22-12-2005 à 11:59:33  profilanswer
 

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

n°1271733
Face_Off
Posté le 22-12-2005 à 12:28:44  profilanswer
 

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.

mood
Publicité
Posté le 22-12-2005 à 12:28:44  profilanswer
 

n°1271737
Face_Off
Posté le 22-12-2005 à 12:34:34  profilanswer
 

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 ? :??:

n°1271746
gravastar_​bureau
vive la mise en page en tab...
Posté le 22-12-2005 à 12:57:41  profilanswer
 

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.

n°1271750
Face_Off
Posté le 22-12-2005 à 13:03:12  profilanswer
 

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. }


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Problème de récupération de variable de session.[C++] Probleme pour recuperer la date courante
probleme avec easyphp v1.7probleme sur le retun d'une classe de load XML
problème avec phpBB2...Problème messagerie (caractères illisibles...)
Firefox pb d'affichage[HELP!]probleme dans mon programme
C# problème de manipulation de chaine de caractère.[oracle/pl/sql] problème trigger
Plus de sujets relatifs à : [CSS] Problème de CSS avec Firefox, mais pas avec Opera ou IE.


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR