Rendu de "overflow:auto"

[TheRec]

Bonsoir,

j'essaie d'intégrer une alternative à la balise <select> et je suis confronté à un petit problème. Je modifie un Javascript existant (oui, c'est en Javascript et oui ça reste "accessible" !) : http://icant.co.uk/forreview/tamingselect/

J'ai une liste déroulante contenant beaucoup d'elements (une liste de pays), je dois donc limiter la hauteur du conteneur et y appliquer un attribut "overflow:auto;". Après quelques modifications du Javascript original ainsi que des styles d'originaux, je suis arrivé à ce résultat : http-://www.hexadec.ch/repository/tamingselect/

Le problème est en fait d'ordre esthétique car cette liste fonctionne dans les navigateurs suivants: IE5.5/IE6/IE5.2 Mac (ce dernier ignore ce Javascript...) , Opera 7.5, Safari 1.3.

Sous FireFox, Netscape (et autres navigateur Gecko) la barre de défilement horizontal apparaît alors qu'elle n'est pas nécessaire (ce, qu'il y ait "padding" ou "margin", les deux ou même rien). J'ai lu ici :

http://www.quirksmode.org/bugreports/archi...to_Firefox.html

que ce bug serait résolu dans les versions 1.1 ... mais ça n'arrange pas mes affaires à l'instant présent

J'ai aussi trouvé une solution "bancale" à base de balises propiétaires (ou presque, apparemment FireFox semble vouloir inclure overflow-x et overflow-y bientôt : CSS3 oblige) :

  overflow:-moz-scrollbars-vertical;
  overflow-y:scroll;
  overflow-x:hide;

Mais cela ne me convient pas, je souhaite que la feuille de style de ce site soit validée :S Et sous Opera empêche même l'accès à la liste...

Quelqu'un a-t-il une piste ou même une solution ? Parce que je suis un peu à court d'idées là ...

Merci d'avance

[Monique]

Bonjour,

Je n'ai pas de solution mais juste pour voir j'ai essayé avec le JavaScript désactivé, et dans ce cas il n'y a pas d'ascenceur horizontal

[TheRec]

Oui effectivement...mais sans Javascript, il n'y a pas de mise en forme pour le contrôle "<select>"... le but de ce script est de remplacer la liste déroulante par une "unordered list" (<ul>) qui d'affiche lorsqu'un clic est effectué... Et lorsque Javascript n'est pas activé, aucun remplacement ne s'effectue et le contrôle <select>" est affiché normalement... (d'où l'accessibilité conservée)

J'avais oublié de préciser cela

Modifié 10 Août 2005 par TheRec

[TheRec]

Je tiens juste à préciser que j'ai essayé le "workaround" qui est proposé sur QuirksMode, mais étant donné que le <div> entourant le <ul> est caché (display:none) tant que l'utilisateur ne clique pas sur la liste, cela ne peut pas être utilisé...

Cela affiche la scrollbar sur le <div>, sans la scrollbar horizontale (ouf...preuve que ça marche dans la "logique"), mais le <div> étant caché, on ne voit que la scrollbar verticale sans le contenu du <div> tant que l'utilisateur n'a pas cliqué pour voir la liste

Bonne nuit...

[Hadrien]

Tu peux mettre une petite marge pour tes li.

.dropcontainer ul li {

list-style-type: none;

list-style-image: none;

text-indent: 0;

padding: 0;

margin: 0;

margin-right: 10px;

}

La barre de scrolling horizontale disparaitra.

[TheRec]

Impécable ! Un énorme MERCI, j'avais essayé le padding et le margin, mais l'un compensait l'autre apparemment...j'ai du louper en essayant le margin seul (/me se donne des claques) ...