Pb avec la balise select

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !

Modérateur : Asumbaa

Répondre
Ursa Major
Arias
Messages : 12
Enregistré le : 14 janv. 2005, 10:04

Pb avec la balise select

Message par Ursa Major » 13 sept. 2005, 18:49

Bonjour,

Excusez-moi si je remets sur le tapis un sujet que vous auriez déjà éclusé... mais j'ai pas trouvé avec le moteur de recherche :oops:

Il semblerait que la balise select prenne ses aises sous FF. Je m'explique:

Si je place un select dans un conteneur div et que je fixe par CSS la taille du div à 100px et celle du select à 100%, tout va bien. le select occupe toute la place laissé par le conteneur et si une option a un contenu qui déborde, cela se voit juste quand on déroule le select. Really perfect.

En revanche, si je veux contenir mon select dans un table (pourquoi pas, y a pas que les div dans la vie 8) ), rien ne va plus:
le select se met à agrandir le tableau comme le montre ce petit exemple:

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Encore un b#g FireFox ?</title>
<style type="text/css">
<!--
.A {border: 1px dotted; width: 100px; font-size: 6pt;}
.B {width: 100%; font-size: 6pt;}
#C {border: 1px solid; width: 100px;}
-->
</style>
</head>
<body>
<div class="A">
	<select class="B">
		<option>Texte court</option>
		<option>Texte long, long, long...</option>
	</select>
</div>
<div class="A">
	<table id="C">
		<tr>
			<td>
				<select class="B">
					<option>Texte court</option>
					<option>Texte long, long, long...</option>
				</select>
			</td>
		</tr>
	</table>
</div>
</body>
</html>
J'ai mis ici 2 select : le 1er reste bien sagement dans son conteneur "A", le 2eme agrandit largement le table (fixé pourtant à 100px aussi) et déborde du 2eme conteneur "A".

Pas très joli, joli...

Ce défaut apparait avec FF et NS (un pb Gecko ?), mais pas sous IE et Opera. Et il semble bien que ce soit un... b#g (vilain mot) car le défaut a été corrigé sur DP, semble-t-il...

En attendant, je suis bien emm...bêté. Si je fixe la taille du select, par exemple à 80px dans l'exemple, les choses rentrent dans l'ordre, mais ce n'est pas ce que je souhaite car le conteneur, dans la vraie vie, aura une taille qui pourra varier...


Quelqu'un aurait une idée géniale pour contourner le problème ? Merci.

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51

Message par calimo » 13 sept. 2005, 19:15

Passer en mode strict. Donc mettre un doctype complet :wink:

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ursa Major
Arias
Messages : 12
Enregistré le : 14 janv. 2005, 10:04

Message par Ursa Major » 13 sept. 2005, 19:54

Ouah ! rapide, la réponse...
Passer en mode strict. Donc mettre un doctype complet
Heu, dans l'exemple, le mode strict, c'était pour se la pêter :lol:

Enfin, mode strict, transitional, ou rien du tout, ça change rien. Gasp !

Iceeee

Message par Iceeee » 13 sept. 2005, 20:33

Pourquoi tu mets une table si il n'y a qu'une seule cellule ?

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Encore un b#g FireFox ?</title>
<style type="text/css">
<!--
.A {border: 1px dotted; width: 100px; font-size: 6pt;}
.B {width: 100%; font-size: 6pt;}
#C {border: 1px solid; width: 100px;}
-->
</style>
</head>
<body>
<div class="A">
   <select class="B">
      <option>Texte court</option>
      <option>Texte long, long, long...</option>
   </select>
</div>
<div class="A" id="C">  
            <select class="B">
               <option>Texte court</option>
               <option>Texte long, long, long...</option>
            </select>
</div>
</body>
</html> 
Ca suffit non ?

Ursa Major
Arias
Messages : 12
Enregistré le : 14 janv. 2005, 10:04

Message par Ursa Major » 13 sept. 2005, 20:57

Ben, j'ai mis qu'une seule cellule pour simplifier l'exemple...

Dans mon appli, y a tout un tas de données tabulées dans un formulaire (dont des selects), et ça serait un peu prise de tête de tout faire avec des blocs div.

Je ne suis pas partisan des anciens designs à coup de tables imbriquées, mais pour présenter un tableau, la balise table est quand même pas mal :wink: ; sauf quand on met des select dedans avec FF...

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51

Message par calimo » 13 sept. 2005, 21:16

J'aurais du dire : "mode de respect strict des standards" plutôt que "mode strict".

C'est un mode de rendu du navigateur, opposé au mode "quirk" ("étrange"...). Le mode strict (qui n'a donc rien à voir avec la variante strict du html) fait que le navigateur a un comportement prévisible. Il faut donc toujours travailler en mode strict.

Par opposition, le mode "quirks" est un mode dans lequel le navigateur n'en fait qu'à sa tête dans le seul but d'émuler les comportements des vieux navigateurs de l'époque des versions 4, qui avaient un rendu archaïque et totalement buggué des CSS. Au fil des versions, les nouveaux navigateurs n'ont pas pu abandonner ces comportements sans casser tout le web, et donc ont fait 2 (3 en fait) modes de rendu, le quirk et l'autre.

Conclusion il faut toujours être en mode standard pour développer quoi que ce soit. 99% des bugs de ce genre sont dus à ça :wink:

Ursa Major
Arias
Messages : 12
Enregistré le : 14 janv. 2005, 10:04

Message par Ursa Major » 13 sept. 2005, 23:02

C'est un mode de rendu du navigateur, opposé au mode "quirk" ("étrange"...). Le mode strict (qui n'a donc rien à voir avec la variante strict du html) fait que le navigateur a un comportement prévisible. Il faut donc toujours travailler en mode strict.
C'est intéressant, ça... J'aimerais bien faire quelques tests de mes développements dans ces différents modes. Comment fait-on, concrètement ?

Ceci dit, j'ai essayé le code que tu m'as indiqué ; cela n'a aucunement changé le comportement de ces p... de balises select.

Damned !

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51

Message par calimo » 14 sept. 2005, 08:50

Bizarre en effet...

Ça ressemble un tout petit peu au bug 253679 mais en fait pas vraiment... ça ressemble déjà plus au bug 252624.

Sinon il y a aussi un très vieux bug, le bug 77789 qui y ressemble étrangement (mais là visiblement c'est l'inverse...).

Cela dit, n'est-ce pas le comportement "normal" des tables que de s'élargir si nécessaire ? Parce que visiblement ce n'est pas spécifique au <select>. Essaye le code suivant :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Encore un b#g FireFox ?</title>
<style type="text/css">
.A {border: 1px dotted; width: 100px;}
.B {font-size: 6pt;}
#C {border: 1px solid blue; width: 100px;}
</style>
</head>
<body>
<div class="A">
   paragraphe_très_très_très_long
</div>
<div class="A">
   <table id="C">
      <tr style="border:1px solid red;">
         <td style="border:1px solid green;">
            paragraphe_très_très_très_long
         </td>
      </tr>
   </table>
</div>
</body>
</html>
C'est bien toute la table qui s'agrandit... il en va de même dans d'autres navigateurs (Opera, IE...)

Dans le cas d'un select trop grand, il est carrément coupé dans IE et Opera, et la fin de l'intitulé est totalement invisible. Pas mieux donc... :roll:

Finalement, tu peux mettre un overflow:hidden sur div.A, c'est pas terrible mais au point où on en est... :roll:

Ursa Major
Arias
Messages : 12
Enregistré le : 14 janv. 2005, 10:04

Message par Ursa Major » 14 sept. 2005, 10:47

Bien vu, Calimo !

Encore que...
C'est bien toute la table qui s'agrandit... il en va de même dans d'autres navigateurs (Opera, IE...)
Le comportement est fondamentalement différent entre les familles IE et Gecko :
Quand la table déborde, le div englobant s'ajuste chez IE alors que chez FF le div garde sa taille et c'est la table qui dépasse...

Les 2 comportement sont tout autant insatisfaisant, selon les cas... :shock:

Et nous, pôvres développeurs, on est bien obligé de faire des pages qui seront le plus correctement possible interprêtées par les différents navigateurs...


Pour revenir à mon pb de select, j'ai mis un bout de code JS qui fixe dynamiquement la taille du select. Et hop ! le soucis à la trappe :wink:


Ca m'amène une autre inquiétude qui sort de ce sujet :
A force de rajouter du code JS (dans mon cas le JS est forcément activé car une grosse appli JS doit tourner), est-ce que je ne vais pas "mettre à genoux" mon navigateur préféré :?:

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51

Message par calimo » 14 sept. 2005, 11:22

Ursa Major a écrit :Le comportement est fondamentalement différent entre les familles IE et Gecko :
Quand la table déborde, le div englobant s'ajuste chez IE alors que chez FF le div garde sa taille et c'est la table qui dépasse...
Effectivement, ça c'est bug connu d'IE qui interprète tous les "height" comme des min-height et les width comme des min-width. Visiblement dans Gecko ce n'est que sur les tableaux... probablement parce que trop de pages seraient "cassées" même en mode standard :(

Ursa Major a écrit :Ca m'amène une autre inquiétude qui sort de ce sujet :
A force de rajouter du code JS (dans mon cas le JS est forcément activé car une grosse appli JS doit tourner), est-ce que je ne vais pas "mettre à genoux" mon navigateur préféré :?:
Non. Mais... ça risque de poser d'autres problèmes, dans d'autres navigateurs dont tu ne connais pas le comportement (Opera, Safari, Konqueror et autres), et également si le javascript est désactivé...

Donc c'est à utiliser avec modération et sans excès :wink:

Ursa Major
Arias
Messages : 12
Enregistré le : 14 janv. 2005, 10:04

Message par Ursa Major » 14 sept. 2005, 12:36

Non. Mais... ça risque de poser d'autres problèmes, dans d'autres navigateurs dont tu ne connais pas le comportement (Opera, Safari, Konqueror et autres), et également si le javascript est désactivé...
Yep!
Je travaille sur une page d'administration où JS est forcément activé ; ça aide 8)

Concernant Opéra et Safari, j'ai déjà eu mon lot de problèmes... Par exemple avec Opera où on ne peut accéder aux feuilles de styles avec JS et Safari où on n'y accède qu'en lecture seule. Mais je ne vous apprends rien, j'imagine...

En tous cas, merci pour le coup de main !

Bobe
Iguane
Messages : 742
Enregistré le : 28 juil. 2003, 21:29

Message par Bobe » 14 sept. 2005, 14:27

calimo a écrit : Visiblement dans Gecko ce n'est que sur les tableaux... probablement parce que trop de pages seraient "cassées" même en mode standard :(
Ça fait partie du modèle de mise en page par défaut des tables:
En particulier, si pour la table les valeurs des marges sont '0' et celle de la largeur 'auto', la table ne prendra pas automatiquement la taille nécessaire pour remplir son bloc conteneur.
edit: pardon, je n’ai pas parfaitement compris le sens de ton message. Le bon passage de la recommandation est celui-là:
Quand la valeur L spécifiée pour la propriété 'width' d'un élément 'table', ou 'inline-table', est autre que 'auto', alors la valeur calculée pour cette propriété correspond à celle la plus grande entre L et la largeur minimale requise par l'ensemble des colonnes plus l'espacement entre les cellules et les bordures, cette valeur étant notée MIN. Si L est plus grand que MIN, la différence de largeur devrait être répartie entre les colonnes ;
Cela seulement si table-layout: auto; (auto est la valeur par défaut pour cette propriété).

http://www.yoyodesign.org/doc/w3c/css2/ ... dth-layout
« La vie d’un geek est un combat perpétuel contre l’imperfection »

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51

Message par calimo » 14 sept. 2005, 15:58

Cela confirmerait donc ce que je suggérais plus haut sans argumenter :
calimo a écrit :Cela dit, n'est-ce pas le comportement "normal" des tables que de s'élargir si nécessaire ?
Donc en mettant table-layout:fixed sur la table le problème pourrait être résolu ? À l'essai ça a bien l'air :)

Ursa Major
Arias
Messages : 12
Enregistré le : 14 janv. 2005, 10:04

Message par Ursa Major » 14 sept. 2005, 19:43

table-layout ?

Tiens, une propriété que je n'avais pas encore eu l'occasion de tester :idea:

En mettant la propriété table-layout: fixed :

Code : Tout sélectionner

#C {border: 1px solid; width: 100%; table-layout: fixed}
c'est le bonheur : le cadre reste bien contenu dans le div englobant, quel que soit le contenu du select qui s'y trouve.
De plus, quand on déplie le select, le contenu s'affiche en entier sous FF, ce qui n'est pas le cas avec IE...

Bravo, les gars !


Reste que je me demande pourquoi, puisque ce comportement est syntaxiquement parfaitement correct, il n'y ait pas besoin de fixer le table-layout dans ma version de DP...


Mais ne chipotons pas :lol:

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 5 invités