5568 sujets

Sémantique web et HTML

Impossible d'afficher un fond dans un DIV contenant un SELECT

Bonjour,

J'ai un formulaire qui contient un SELECT obligatoire pour le notifier à l'utilisateur, j'affiche à droite une étoile sous forme d'image. Comme ci-dessous.
upload/20497-required.jpg

Pour arriver à cela j'ai ce code
HTML
a écrit :
<div class="input select required"><select id="EpiTypeId" name="data[Epi][type_id]">
<option value=""/>
<option value="3">Absorbeur</option>
<option value="1">Ancrage</option>
<option value="15">Anneau</option>
<option value="11">Antichute</option>
<option value="10">Assureur</option>
<option value="2">Bloqueur</option>
<option value="6">Casque</option>
<option value="7">Connecteur</option>
<option value="12">Corde</option>
<option value="13">Dégaine</option>
<option value="5">Descendeur</option>
<option value="4">Harnais</option>
<option value="9">Longe</option>
<option value="8">Poulie</option>
</select></div>


CSS
a écrit :
.input.required {
background:transparent url(../img/required.gif) no-repeat scroll right 3px;
padding-right:16px;
}


Sous FF et Safari cela fonctionne correctement.
Par contre sous IE, l'image ne s'affiche pas. Après avoir debugger le truc, j'en suis venu à la conclusion suivant. IE ne veut afficher un background dans DIV s'il contient un SELECT.

Ma conclusion est elle farfelu ?
Auriez vous une solution.

Merci d'avance
Je me suis fait un petit fichier de test et j'ai remarqué quelque chose de sympa.

a écrit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<style>
.input {
background: #FF0000;
padding: 5px;
}
</style>
</head>
<body>
<span class="input required">
<div class="input select required"><select id="EpiTypeId" name="data[Epi][type_id]">
<option value=""/>
<option value="3">Absorbeur</option>
<option value="1">Ancrage</option>
<option value="15">Anneau</option>
<option value="11">Antichute</option>
<option value="10">Assureur</option>
<option value="2">Bloqueur</option>
<option value="6">Casque</option>
<option value="7">Connecteur</option>
<option value="12">Corde</option>
<option value="13">Dégaine</option>
<option value="5">Descendeur</option>
<option value="4">Harnais</option>
<option value="9">Longe</option>
<option value="8">Poulie</option>
</select></div>
</span>
</body>


J'ai le problème quand l'active l'émulation IE7 mais sinon cela fonctionne. IE8 fonctionne correctement.
Salut,

je n'ai que IE6 sous la main donc je ne peux pas tester...

Par contre 2 remarques concernant l'accessibilité :
* le fait d'utiliser une image pour spécifier les champs obligatoires est une mauvaise idée car les personnes non-voyantes n'auront pas l'information. Il suffit d'une phrase (avant le formulaire) précisant que les champs précédés de * sont obligatoires et de mettre l'astérisque dans le code html.
* c'est également une bonne idée d'utiliser les éléments LABEL (for) avec chacun des champs de saisie.

Cela donne par exemple :
<label for"nom">Nom *</label>
<input type="text" name="nom" id="nom" />

A voir : Des formulaires accessibles (access-key.org).
A lire : http://openweb.eu.org/articles/formulaire_accessible
Bonsoir,

Effectivement l'accessibilité n'est pas souvent prévu dans les sites et là dans mon cas, j'avoue que ce n'est pas le cas, j'y ai pas réfléchi.

Mais c'est vrai que le site que je suis entrain de développer permet de gérer le suivi de matériel de sécurité d'escalade, d'alpinisme et de spéléologie. Il faut réaliser des contrôles tactiles et visuels de ce matériel.
Dans ce cas, le principe du site est difficilement accessible par les mal voyant.

Second point concernant le caractère *. J'ai toujours trouvé ça très moche mais ce n'est pas que mon avis. Je trouve déjà que je me bride à cause d'IE.
vanitom a écrit :
Effectivement l'accessibilité n'est pas souvent prévu dans les sites
De plus en plus malgré tout... et puis, pour rappel, Alsacréations est dédié au respect des standards et à l'accessibilité. Smiley cligne

vanitom a écrit :
Mais c'est vrai que le site que je suis entrain de développer permet de gérer le suivi de matériel de sécurité d'escalade, d'alpinisme et de spéléologie. Il faut réaliser des contrôles tactiles et visuels de ce matériel.
Dans ce cas, le principe du site est difficilement accessible par les mal voyant.
C'est bien sûr à chacun de voir jusqu'à quel point il souhaite investir du temps dans l'accessibilité. Cela dit on peut imaginer qu'un grand-père non ou mal-voyant désire acheter un piolet pour son petit fils ! Smiley smile

Personnellement j'aime bien l'idée que sur le Web (et c'est privilégié) on peut faire en sorte que chacun soit traité avec le même respect... mais je m'égare. Smiley hippy

vanitom a écrit :
Second point concernant le caractère *. J'ai toujours trouvé ça très moche
Dans ce cas il suffit d'utiliser l'image mais en la mettant dans le code html avec le alt qui va bien :
<label for"nom">Nom <img src="asterisque.gif" width="10" height="10" alt="*" /> </label>
Ca y est je viens de faire la modification. Maintenant les champs obligatoire sont identifiés avec des vrais images et non des background.
Et ces images contiennent un alt contenant "*". Ce ne peut pas faire de mal.

Encore merci pour l'idée.
Ba oui j'ai figé sur mon idée de background.
Cool ! Smiley smile

Sinon je viens de faire le test dont tu parlais dans ton premier post sur IE8 (en mode EmulateIE7) et je n'ai pas constaté de problème. Smiley hmm
Sujet clos
Aller à