Bonjour, j'ai un problème sous chrome uniquement avec les légendes des fieldsets mais qui m'a posé un cas de conscience !
En fait mes légendes sont composées d'image et de combobox, bref que des phrasing content pour respecter les spec du W3C. Elles ont une raison d'être dans la légende dans la mesure ou le contenu du fieldset est relatif au combobox choisi donc la légende est décrite grace à la valeur selectionnée dans les combobox.
Dans le code en simplifié ça donne ça :
Le code html est validé par le W3C ça m'a rassuré sur le contenu de ma légende par contre ce qui est plus douteux et qui me pose problème c'est la css, à savoir les propriétés float sur mes span.
Sans cette propriété l'alignement entre mes images et mes selects est mauvaise car les images sont plus grandes que le texte et le texte se cale au même niveau que l'image.
Les marges top et bottom n'étant applicables qu'aux éléments de type bloc je ne peux pas les utiliser directement sur ma span, or j'y ai accès depuis que j'ai attribué la propriété float à mes span. Du coup j'en ai déduis que cette propriété transformait implicitement le container en block. Ca a été confirmé lorsque du coup j'ai essayé d'attribuer une hauteur à un élément de type span. Celle-ci n'est prise en compte que si je pose la propriété float.
Du coup, deux questions :
La première : Si l'attribue float converti un élément de type inline en type bloc, ne doit-il pas être totalement proscrit d'une légende (ça me ferait bien ch... mais bon ^^).
La deuxième va avec la première : Si le float remet bien en question le type display du container, doit on finalement considérer (malgré les recommandations du w3c oO) que select et img, à qui nous pouvons attribué des valeurs de type margin-top ou bottom et des valeurs de tailles n'ont pas non plus leur place dans une legend ?
La troisième qui est très étrange et qui n'a rien à voir : Chrome ... Pourquoi est ce qu'il n'affiche rien dans la légende si la légende n'est composée que d'élément en float ? Il suffit de lui rajouter un simple élément qui float pas pour arranger le problème.(ce qui était facile dans mon cas, je n'ai d'ailleurs plus aucun élément qui float, j'utilise uniquement les select et img comme balise directement enfant de la légende et je les positionne via le vertical align, des tailles et des marges)
Exemple :
Par contre
Lui affiche tout ...
Sous chrome uniquement, firefox et ie affiche tout.
ÉTRANGE !
Modifié par Gadwin (13 Sep 2013 - 14:16)
En fait mes légendes sont composées d'image et de combobox, bref que des phrasing content pour respecter les spec du W3C. Elles ont une raison d'être dans la légende dans la mesure ou le contenu du fieldset est relatif au combobox choisi donc la légende est décrite grace à la valeur selectionnée dans les combobox.
Dans le code en simplifié ça donne ça :
<fieldset>
<legend>
<span id="navigation">
<img src="flechegauche.png" alt="précédent" />
<img src="flechedroite.png" alt="suivant" />
</span>
<span id="filtre">
<select>
<option value="1">choix 1</option>
<option value="2">choix 2</option>
<option value="3" selected>choix 3</option>
</select>
<select>
<option value="1b">choix 1b</option>
<option value="2b" selected>choix 2b</option>
<option value="3b">choix 3b</option>
<option value="4b">choix 4b</option>
</select>
</span>
</legend>
</fieldset>
fieldset > legend > span
{
float : left
}
fieldset > legend > #navigation
{
margin : 0 0.25 0 0.25em;
}
fieldset > legend > #filtre
{
margin : 0.4em 0.25 0.4em 0.25em;
}
fieldset > legend img
{
width : 2em;
height : 2em;
}
Le code html est validé par le W3C ça m'a rassuré sur le contenu de ma légende par contre ce qui est plus douteux et qui me pose problème c'est la css, à savoir les propriétés float sur mes span.
Sans cette propriété l'alignement entre mes images et mes selects est mauvaise car les images sont plus grandes que le texte et le texte se cale au même niveau que l'image.
Les marges top et bottom n'étant applicables qu'aux éléments de type bloc je ne peux pas les utiliser directement sur ma span, or j'y ai accès depuis que j'ai attribué la propriété float à mes span. Du coup j'en ai déduis que cette propriété transformait implicitement le container en block. Ca a été confirmé lorsque du coup j'ai essayé d'attribuer une hauteur à un élément de type span. Celle-ci n'est prise en compte que si je pose la propriété float.
Du coup, deux questions :
La première : Si l'attribue float converti un élément de type inline en type bloc, ne doit-il pas être totalement proscrit d'une légende (ça me ferait bien ch... mais bon ^^).
La deuxième va avec la première : Si le float remet bien en question le type display du container, doit on finalement considérer (malgré les recommandations du w3c oO) que select et img, à qui nous pouvons attribué des valeurs de type margin-top ou bottom et des valeurs de tailles n'ont pas non plus leur place dans une legend ?
La troisième qui est très étrange et qui n'a rien à voir : Chrome ... Pourquoi est ce qu'il n'affiche rien dans la légende si la légende n'est composée que d'élément en float ? Il suffit de lui rajouter un simple élément qui float pas pour arranger le problème.(ce qui était facile dans mon cas, je n'ai d'ailleurs plus aucun élément qui float, j'utilise uniquement les select et img comme balise directement enfant de la légende et je les positionne via le vertical align, des tailles et des marges)
Exemple :
<legend>
<img src="superimage.jpg" style="float:left" alt="Image super jolie"/>
<span style="float : left">
<span>elem 1</span>
<span> elem 2</span>
</span>
</legend>
Par contre
<legend>
<img src="superimage.jpg" style="float:left" alt="Image super jolie"/>
<span>
<span style="float : left">elem 1</span><span> elem 2</span></span>
</legend>
Lui affiche tout ...
Sous chrome uniquement, firefox et ie affiche tout.
ÉTRANGE !
Modifié par Gadwin (13 Sep 2013 - 14:16)
).
.
.
