Problème cadre overflow sous Firefox

Mysterious_fea Messages postés 406 Statut Membre -  
Gihef Messages postés 5165 Statut Contributeur -
Bonjour,
Pour une fois, c'est FF qui me pose problème pour ma mise en page !
Tout marchait bien avant, sur ma page, avec deux marges de 180px de chaque côté du cadre, mais j'ai décidé de rajouter un overflow au cadre orange contenant le texte. J'ai mis overflow-x:visible et overflow-y:auto, mais maintenant les marges sont appliquées deux fois, donc le cadre orange est tout petit, et il faudrait que je supprime les deux marges à droite et à gauche. Mais le problème, c'est que sous IE ça marche parfait, et si j'enlève les marges, là ça va "merder".
Je crois que le problème est fréquent sous FF, vous avez une idée du moyen de le résoudre ?
MERCI
A +
Configuration: Windows XP
Firefox 2.0.0.11

21 réponses

  • 1
  • 2
  1. gryzzly Messages postés 5220 Date d'inscription   Statut Contributeur Dernière intervention   1 340
     
    Le soucis, c'est que les différents navigateurs interpètent différemment les propriétés margin et padding.
    Il faut donc que tu fasses des feuilles de styles spécifiques à chaque navigateur, ou alors que tu passes par les "hacks", notamment des présentations des css lisibles spécifiquement par un navigateur et non par les autres.

    Malheureusement, j'ai eu un gros probleme de machine, et j'ai perdu tous mes bookmark... faut que tu googles par toi meme pour trouver les fameux "hacks"
    0
  2. Gihef Messages postés 5165 Statut Contributeur 2 781
     
    Bonjour,

    J'ai parcouru ton code.
    Et je ne comprends pas bien tes choix.

    Tu regroupes tes blocs du centre dans un bloc “middle”. Bonne idée.
    Dedans les 3 blocs “left, right, content”.

    Les “left” et “right” sont positionnés en “float”.
    Mais pas le “content” que tu gères avec des marges.
    Tu perds une certaine logique qui semble tendre vers un positionnement de même type pour le “content”.

    As-tu essayé ?

    Il faudra bien-sûr qu'un bloc en “clear” soit DANS le “middle”.

    ++
    “overflow-x” je ne suis pas sûr que ça existe.

    --
    0
  3. Mysterious_fea Messages postés 406 Statut Membre 35
     
    Merci pour vos réponses.
    => Grizzly : j'ai un peu regardé les hacks, mais bon c'est pas super propre et je pense que je pourrais régler mon problème autrement, notamment avec la méthode de Gihef.
    => Gihef : comment veux-tu que je fasse ? Si je positionne mon "content" en float, comment faire pour qu'il se place bien ? (j'avais jusque là utilisé deux marges et une largeur qui s'adaptait, en suivant un tuto de "mise en page pour toutes résolutions", mais ce n'est finalement pas le bon choix). Comment tu ferais, toi ?
    Je pense que solutionner ce problème de "content" réglerait le reste.
    Merci pour tes réponses.
    A+
    0
  4. Mysterious_fea Messages postés 406 Statut Membre 35
     
    Un truc qui me vient, comme ça :
    Est-ce que je pourrais, en JS, récupérer page.width, lui soustraire la largeur des deux colonnes à droite et à gauche, et la définir comme la width de mon "content", que je placerais en float:left ?
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. Gihef Messages postés 5165 Statut Contributeur 2 781
     
    En y repensant, je me suis dit qu'il serait peut-être plus simple de faire autement.

    Le “absolute” permet de faire tout ça plus facilement.

    Alors j'ai testé
    div#middle{
position : relative;
width:auto;
/*  width:100%!important;
  float:left;
*/
/*  clear:left;*/
  margin-bottom: 0;
}

div#left{
/*  float: left;
*/
position : absolute;
left : 0;
  width: 140px;
  padding: 10px 10px 0 10px;
  background-color: #000000;
  border: 1px solid #FFA017;
  margin-bottom: 10px;
  margin-left:10px;
  height: 290px;
}

div#right{
/*  float:right;
*/
position : absolute;
right : 0;
  width: 146px;
  padding:10px 10px 0 4px;
  background-color:#000000;
  border: 1px solid #FFA017;
  margin-bottom: 10px;
  margin-right:10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  padding-bottom: 10px;
  height: 280px;
  color: #999999;
  }

div#content{
height: 290px;
  padding-top:10px;
  margin-right:180px;
  margin-left:180px;
  background-image:url(images/bg-content.png);
  background-repeat:repeat-x;
overflow:auto;
/*  clear: none;
  height:auto;
  min-height: 1px;
  padding-top:300px;
  overflow-y:auto
  overflow-x:visible;
*/
}

div#bottom{
width : auto;
/*  clear: both;
*/
  border: 2px solid #FFA017;
  background-color:#E53000;
  font-size: 85%;
  color: #000000;
  padding: 10px 0;
  text-align:center;
  margin: 5px 10px;
  font-weight: bold;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}


avec

.feature{
  padding: 0px 0px 3px 10px;
  font-size: 80%;
/*  margin-top: -300px;*/
}
    Ça semble être une possibilité qui peut répondre à ta question.

    À tester.

    --
    0
  7. Mysterious_fea Messages postés 406 Statut Membre 35
     
    Mais qu'est-ce que t'a changé au niveau du positionnement ?
    Et que veut dire /* ..................... */ ? C'est ce que je ne dois pas mettre ?
    Merci
    0
  8. Gihef Messages postés 5165 Statut Contributeur 2 781
     
    Mes modifications sont les lignes collées à la marge, sans retrait.

    Quant aux /* … */, ils masquent les lignes de code.

    --
    0
  9. Mysterious_fea Messages postés 406 Statut Membre 35
     
    Merci beaucoup ça marche très bien (je mettrais en ligne prochainement)
    Je garde le post au cas où (j'aurais surement d'autres problèmes !)

    Merci encore pour ton aide
    Ciao
    0
  10. Mysterious_fea Messages postés 406 Statut Membre 35
     
    Si t'as un moment, peux-tu regarder mon autre post stp ?
    Merci
    0
  11. Gihef Messages postés 5165 Statut Contributeur 2 781
     
    OK, mais, résolu, on peut considérer que c'est résolu alors ?

    --
    0
  12. Mysterious_fea Messages postés 406 Statut Membre 35
     
    OK merci encore
    0
  13. Mysterious_fea Messages postés 406 Statut Membre 35
     
    Résolu !
    0
  14. Mysterious_fea Messages postés 406 Statut Membre 35
     
    Oups, encore un problème ! Je viens de voir que sous IE6 il y avait un gros problème avec la mise en page : ici
    Comment le régler svp ?
    merci ciao
    0
  15. Gihef Messages postés 5165 Statut Contributeur 2 781
     
    Tu trouverais certainement une solution en plaçant l'ensemble des ta page dans un conteneur global.
    Comme dans cet exemple.

    --
    0
  16. Mysterious_fea Messages postés 406 Statut Membre 35
     
    Ca ne règle pas le problème : regarde ces screenshoots sous IE5.5 et 6
    Comment faire ?
    0
  17. Mysterious_fea Messages postés 406 Statut Membre 35
     
    Quelqu'un a une idée ?
    Je pense que le problème sous IE < 7 viens de "position".
    Si je met 'position:absolute' à "left", elle se replace bien à 0px du bord gauche. Sinon, elle ne prend pas en compte 'left:0px'.
    Mais bon, si je lui met 'position:absolute', ça dérègle toute ma mise en page...
    Comment lui faire comprendre left:0px ?
    Merci
    0
  18. gryzzly Messages postés 5220 Date d'inscription   Statut Contributeur Dernière intervention   1 340
     
    Je te renvoies encore une fois à ma réponse 1.
    Chaque navigateur interprete diféremment les différentes propriétés. Il n'y a que le tatonnement qui permette d'arriver à tes fins. et l'utilisation de plusieurs feuilles de style ou de hacks, car, a moins d'avoir une mise en page ultra fluide, sans propriétés peu ocnventionnelles, tu auras toujours des problèmes de mise en page sous l'un ou sous l'autre des navigateurs.

    tu peux aussi essayer une mise en page de qq blocs en "float"
    0
  19. Mysterious_fea Messages postés 406 Statut Membre 35
     
    Il n'existerait pas une petition pour brûler les créateurs d'IE par hasard ?
    0
  20. gryzzly Messages postés 5220 Date d'inscription   Statut Contributeur Dernière intervention   1 340
     
    héhé... pas à ma connaissance. mais si tu l'as trouve, je signe :o)
    0
  21. Mysterious_fea Messages postés 406 Statut Membre 35
     
    Non mais, blague à part, personne n'a une idée, une suggestion ?
    0
  • 1
  • 2

Discussions similaires

Méssage Firefox ''Couldn't load XPCOM''
pistouri -
pistouri -

0 réponse
Cadre photo numérique en panne
ED87 -
cleme33760 -

9 réponses