Problème cadre overflow sous Firefox

Question

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 +

gryzzly · Answer

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"

Gihef · Answer

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

Mysterious_fea · Answer

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+

Mysterious_fea · Answer

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 ?

Gihef · Answer

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

Mysterious_fea · Answer

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

Gihef · Answer

Mes modifications sont les lignes collées à la marge, sans retrait.

Quant aux /* … */, ils masquent les lignes de code.

--

Mysterious_fea · Answer

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

Mysterious_fea · Answer

Si t'as un moment, peux-tu regarder mon autre post stp ?
Merci

Gihef · Answer

OK, mais, résolu, on peut considérer que c'est résolu alors ?

--

Mysterious_fea · Answer

OK merci encore

Mysterious_fea · Answer

Résolu !

Mysterious_fea · Answer

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

Gihef · Answer

Tu trouverais certainement une solution en plaçant l'ensemble des ta page dans un conteneur global.
Comme dans cet exemple.

--

Mysterious_fea · Answer

Ca ne règle pas le problème : regarde ces screenshoots sous IE5.5 et 6
Comment faire ?

Mysterious_fea · Answer

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

gryzzly · Answer

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"

Mysterious_fea · Answer

Il n'existerait pas une petition pour brûler les créateurs d'IE par hasard ?

gryzzly · Answer

héhé... pas à ma connaissance. mais si tu l'as trouve, je signe :o)

Mysterious_fea · Answer

Non mais, blague à part, personne n'a une idée, une suggestion ?

Gihef · Answer

Je ne me souviens pas l'avoir évoqué, mais essaye après avoir fait les corrections essentielles.

Ensuite, si tu ne tiens pas absolument au XHTML, essaye après avoir modifié le DOCTYPE en HTML.

--

Problème cadre overflow sous Firefox

21 réponses

Votre réponse

Discussions similaires

Newsletters