CSS - Probleme overflow:autoRésolu/Fermé

Question

Voilà mon prob, j'utilise un overflow/auto mais suivant les navigateurs (ie ou firefox), la taille du bloc <DIV> qui contient l'attribut de style overflow:auto n'est pas la meme.En effet, je fixe la taille de mon bloc (width:750px;) mais le rendu n'est pas le meme sous IE que sous Firefox.Le premier inclu l'espace réservé au scroll dans els 750 px alors que Firefox ajoute le scroll aux 750 px.Ce qui génère des blocs de taille très différentes suivant les navigateur.Quelqu'un aurait il une solution ou astuce pour éviter ce probleme ???Merci d'avance ...NB : A quand des navigateurs qui respectent tous les normes W3C !!!?

Mitch074 · Accepted Answer

'width' d'après les spécifications, définit le contenu de la boîte, hors bordure et marge interne (padding) - ce tracé conditionnant les dimensions de tous ses enfants, rendre un truc aussi aléatoire que la largeur d'une barre de défilement partie de la définition du contenu est franchement idiot (c'est le cas de IE).

Pourquoi? Parce que dans un cas où le contenu de la boîte fait effectivement toute la largeur de la boîte (mettons, une image de 750px de large), l'apparition de la scrollbar latérale à l'intérieur de la boîte fait apparaître aussi la scrollbar horizontale! C'est moche, c'est difficile à naviguer, c'est pourrave, ça prend de la place pour rien, et ça demande de compter les pixels d'un élément d'interface utilisateur inaccessible pour un calcul automatique - donc de réserver manuellement de la place pour le cas le plus courant.

Là, le standard prend tout son sens: la taille du contenu de la boîte une fois décidé, y'a plus qu'à s'inquiéter de la place libre dans son conteneur.

Alors, puisque c'est si idiot, pourquoi faire des boîtes de taille fixe?

Simplement parce que IE 6 et inférieurs sont incapables de tracer des boîtes dont on définit les dimensions par rapport à leur conteneur (essayez de tracer une boîte avec top:10px, bottom:10px, left:10px,right:10px, et pleurez), ce qui empêche le tracé de pages à contenu fluide - il faut donc définir des pages à contenu fixe, avec des dimensions définies au pixel près, juste pour que IE les affiche sans faire appel à Javascript dans son CSS.

Et là, IE 7 (qui pourtant comprend enfin correctement le tracé 'fluide' d'éléments de pages) montre vraiment la perversité du mode de calcul d'IE: chaque fois que les barres de défilement doivent apparaître parce que le contenu de la page change (mettons, un élément s'agrandit lorsque survolé par la souris, ou la page est redimensionnée), l'apparition des barres de défilement entraîne une confusion totale de l'affichage.

Prenons le cas de figure d'un conteneur avec overflow:auto, qui contient du contenu varié mais essentiellement fluide (texte et blocs redimensionnables). Si l'un des blocs change de dimension, le texte devrait 'couler' et se repositionner, et si le contenu déborde du conteneur, overflow:auto devrait faire apparaître une barre de défilement latérale (rien ne pousse à l'horizontale puisque le texte s'écoule).
IE 7 aura les réactions suivantes:
 - les barres de défilement n'apparaissent pas alors qu'elles le devraient (contenu qui déborde de son conteneur, agit comme overflow:none)
 - la barre latérale apparaît, mais calcule mal le contenu (faire défiler la barre la fait sauter et se redimensionner; charge processeur grimpe à toute vitesse, risque de plantage du PC)
 - les deux barres apparaissent, alors que l'horizontale n'est pas nécessaire
 - le contenu s'affiche normalement avec une seule barre de défilement latérale parce qu'il n'y a plus de contenu redimensionnable hors zone affichée.

Sous Firefox 2, une barre de défilement apparaît sur le côté. Elle peut rester même si elle n'est pas nécessaire par la suite (un élément agrandit rétrécit à nouveau), mais elle disparaît si un autre élément entraîne un 'reflow' de la page.

Opéra 9, Safari et Firefox 3 recalculent le contenu de la page avec fluidité.

Traduction, ici IE est réellement pourrave.

Solution pour le cas de figure présent: utiliser le doctype html 4 Strict ou Xhtml 1.0 strict fait que IE6/7 et firefox calculent la largeur du bloc de la même manière. Pour éviter de s'enquiquiner avec les scrolls, une solution est de définir un conteneur assez large (mettons, 780px), de lui donner à lui l'attribut overflow:auto, et de coller à l'intérieur le div de largeur 750px, sans overflow. A ce moment-là, c'est le div conteneur qui s'occupe de 'scroller' son contenu, lequel fait 750px - point barre.

asevere · Answer

Salut, Si tu nous mettais un exemple de page, plus la CSS concerné, ça pourrais nous aider a te répondre ;)@+...Mana mana   Tutudutu...

matwil · Answer

Re !J'ai crée une page vide de contenu pour illustrer mon prob mais ce n'est pas tres utile jepense puisque c'est une question de naivgatuer (IE ou Firefox) ... Mais bon sait on jamais ...http://www.matwil.comhttp://www.matwil.com/css.css

matwil · Answer

Salut à Tous !! Je répond à mon propre post pour donner "l'astuce" qui permet de résoudre tous les probleme de ce genre... Ce qui se passe c'est que Internet explorer c'est tellement de la merde que si on ne lui spécifie pas unDoctype pour lui faire compremdre qu'il faut par exemple vraiment qu'il se mette aux normes W3C, il ne le fait pas ... Donc il suffit de placer en haut de page (au dessus de la balise ) le doctype qui correspond à votre page : --> HTML 2.0 --> HTML 3.2 --> HTML 4.01 - Strict --> HTML 4.01 - Transitional --> HTML 4.01 - Frameset --> XHTML 1.0 - Strict --> XHTML 1.0 - Transitional --> XHTML 1.0 - Frameset --> XHTML 1.1

visiteur · Answer

Comme j'ai le même problème, et si je puis me permettre :

Ce qui est de la merde, ce n'est certinement pas IE qui a l'intelligence d'inclure " l'espace réservé au scroll dans els 750 px", mais plutôt une norme qui prétendrait qu'il faut mettre la scrollbar à l'extérieur alors que :

1°)  Le bon sens veut que la scrollbar fasse partie de ladite boite (puisque si tel n'était pas le cas, autant qire qu'elle se "ballade dans la nature")
2°)  Jusqu'à preuve du contraire, il n'existe aucune méthode permettant de connaitre la taille d'une scrollbar chez le client (pour le moins problématique s'il faut travailler uniquement avec des tailles connues)
3°)  et c'est là que ça devient un problème : On ne connaît pas nécessairement la TAILLE VOULUE de la boîte en overflow=auto (sauf, j'en conviens, à développer des interfaces qui n'offrent aucune flexibilité côté client).

CONCLUSION : un navigateur qui oblige à se fixer des tailles en dur (comme "750px") pour pouvoir utiliser convenablement l'overscroll=auto est pour moi de la merde, et non l'inverse. L'idéal serait évidemment que le développeut puisse indiquer au navigateur, en fonction des besoins, si la scrollbar doit être à l'intérieur de la boîte ou à l'extérieur...

CSS - Probleme overflow:auto

5 réponses

Discussions similaires

Newsletters