28173 sujets

CSS et mise en forme, CSS3

Hi,

lorsqu'on met :

fieldset
{
     border:1px dotted #000;
}

le fieldset est censé entourer des éléments avec une bordure en pointillés de 1px d'épaisseur.
Cependant sous firefox, lorsque le fieldset a une légende, la bordure supérieure "s'arrête" avant la légende et "repart" après, alors que sous IE, elle passe derrière (ce qui fait un texte écrit sur une bordure, on croirait voir une rature).

Y a-t-il moyen de déplacer la position de <legend> ou annuler cet effet sous IE ?
Merci de toute réponse.
(PS : absent ce WE)
Modifié par Malcolm (23 Jan 2007 - 21:43)
Bonjour Malcolm,

Est-ce que ceci ne ferait pas l'affaire :
fieldset legend {background: white; padding: 0 4px;}
?
Bien sûr,
1. la couleur est à changer selon les besoins et
2. cela pose problème si on veut afficher une image de fond derrière le legend.
Hello,
merci de ta réponse ...
Formulée comme ceci, non, ça n'arrange rien : en effet, tu mets un padding de 4px à droite et gauche, mais dans la mesure où la bordure est "derrière" le texte, c'est un padding haut et bas qu'il faut. Voire haut seulement^^

J'ai donc testé avec un padding exagéré :

fieldset legend {background: white; padding:  60px 4px 0 0;}


et j'ai effectivement l'effet désiré, bien que le fieldset descende de plusieurs crans par la même occasion. Merci l'interprétation CSS ...

Je pense qu'on peut arrêter là ce sujet, je n'ai pas l'impression qu'il y ait une solution réelle.
Je ne crois pas qu'il s'agisse d'une interprétation CSS. Le rendu de chaque balise par un "agent utilisateur" (dans ton cas, un navigateur graphique), dans la mesure où il respecte les User Agent Accessibility Guidelines du W3C, est laissé en théorie à la libre appréciation de l'éditeur. En pratique, quelques standards de mise en forme se sont de facto mis en place: un italique pour le texte mis en évidence (em, même s'il ne s'agit pas d'un vrai italique), graisses des titres, etc.

Pour des éléments moins souvent utilisés, ces standards de facto ne se sont pas mis en place. C'est le cas de fieldset. Les UAAG demandent: "Make available to the user an "outline" view of rendered content, composed of labels for important structural elements (e.g., heading text, table titles, form titles, and other labels that are part of the content).", et donne comme exemples de techniques :
a écrit :

# For instance, in HTML, labels include the following:
* The CAPTION element is a label for TABLE
* The title attribute is a label for many elements.
* The H1-H6 elements are labels for sections that follow
* The LABEL element is a label for the form element
* The LEGEND element is a label for a set of form elements
* The TH element is a label for a row/column of table cells.
* The TITLE element is a label for the document.
# Allow the user to expand or shrink portions of the outline view (configure detail level) for faster access to important parts of content.
# Hide portions of content by using the CSS display and visibility properties ([CSS2], sections 9.2.5 and 11.2, respectively).
# Provide a structured view of form controls (e.g., those grouped by LEGEND or OPTGROUP in HTML) along with their labels.


Il n'y a rien là-dedans de contraignant sur la manière de rendre accessibile cette information.