éviter le "overflow: auto"

bonsoir.

J'ai à la création du design du mettre un overflow: auto pour parer à un bug d'affichage.
Cela avait engendré ce qu'on retrouve parfois sur certains sites avec firefox, à savoir quand on clique à gauche du site (quand il est centré) ça "sélectionne tout". Rien de bien grave un seul visiteur ma fait la remarque.

Cependant, si cela pouvait être réparé, ça serait bien... j'ai fait pleins de tests et impossible d'aligner le design comme il faut dès que j'enlève cet overflow: auto.

démo: http://www.power-anime.fr/

le <div> ayant l'overflow est "main" encadrant tout le contenu du site sans le header dont voici le code:

#main, #footer {
background:transparent url(design/bg.gif) repeat-y;
margin:0pt auto;
overflow:auto;
padding-bottom:10px;
text-align:center;
width:1000px;
}

bref si quelqu'un aurait une idée de comment procéder, je fais des tests la plus part du temps à la volée avec firebug (extension firefox que tout le monde doit connaitre je suppose? ) et j'ai encore rien trouvé sur les sites à propos de ce problème

Je précise que j'ai appris à codé sur ce site et que par conséquent ya des parties de codes qui doivent êtres plus nulles que d'autres comme je n'ai pas tout retouché

merci de votre précieuse aide et bonne soirée.

Cordialement, DD.

Personellement j'ai aps tres bien saisie le probleme

j'avoue que cela n'est pas facile a expliquer, le mieux c'est de regarder sur le site directement.
Lorsque tu es dessus, clique dans la zone bleu a gauche (au niveau du menu principal par exemple) et tu verras que tout le contenu du site se sélectionne. (phénomène visible sous firefox)
je voudrais essayer d'enlever ce problème, et par conséquent de remplacer le "overflow: auto" par autre chose dans le CSS mais je n'ai rien trouvé et rien n'a fonctionné
Modifié par milouse (21 Mar 2008 - 18:17)

Salut,

Essaye en incluant ton footer dans ton block #main dans ton code html et de lui conférer la propriété clear: both; en ayant préalablement supprimer l'overflow: auto de #main.

bonjour,

tu peut aussi remplacer ton overflow par un 'display:table;' . Etant donné que ta largeur est definie (width:1000px;) cela ne devrait suffire.

A noté que , comme dans IE6 , les width:1000px seront alors considéré comme un min-width.
Le display:table active les propriétés d'affichage identique a un tableau , donc englobe les flottants mais aussi peut s'adapter a la taille de son contenu.

IE7 appliqueras le width:1000px a la lettre (heu , au pixel) , display:table; n'etant pas implémenter (ou partiellement) .

autre soluce connue qui va bien en css c'est :

#main:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

IE n'est pas concerné , il ne comprend pas cette régle mais une largeur est appliqué a #main , ce qui suffit a régler ce defaut de flottant 'qui dépasseent' .

GC

Ah tiens, je ne connaissais pas ce «bug» de Firefox 2 (corrigé dans Firefox 3). Ça fait la même chose avec un overflow: hidden. Mais ça doit pas être évident à reproduire, pour ma part je ne l'ai jamais croisé.

Solution possible:
1. avoir un conteneur global pour l'image de fond répétée en hauteur;
2. utiliser le pied de page pour clearer les flottants (clear: both).

j'ai remplacé overflow: auto; par display: table; et le problème a disparu! :|

merci gcyrillus ^_^
j'ai testé avec 3 navigateurs jattends les résultats de browsershots pour être sur de pas avoir de problèmes

je met vos astuces dans mon ptit document magique on sait jamais ça peut toujours servir

bonne soirée!

Plop milouse!

Je sais pas si ton lien en haut est toujours valide (enfin je veux dire si tu as appliqué les changements pour résoudre ton problème), mais avec mon FF2, j'ai toujours une sélection globale du contenu de ton site (très joli d'ailleurs) lors d'un clique tout a gauche.

bonjour,

effectivement j'ai remis comme cétait auparavent car je devais partir pour quelques jours, en faite par moment il arrive que le contenu saffiche apres le menu on rafraichi la page sans rien avoir touché et c'est bon, donc jai préféré laisser comme avant pour le moment.

Quand j'aurais un peu de temps je continuerais de tester ce que vous m'avez dit

Cordialement, Milouse.