28234 sujets

CSS et mise en forme, CSS3

Aligner <fieldset> et <legend> à gauche

Bonjour,

j'essaie d'aligner le contenu de la legend d'un fieldset complètement à gauche. Si j'en crois le browser mode IE7 et IE tester, il existe un décallage à droite sur IE7 et IE6. Sur les autres navigateurs, j'arrive à aligner complètement à gauche la legend mais pas sous IE6 et IE7.

Quelqu'un a t-il déjà été confronté à cela? Quelqu'un a-til une idée? je cherche depuis pas mal de temps Smiley smile . Pour voir un exemple, voici le code:

HTML

<fieldset class="fsques">
<legend  class="fsquesj">
Votre profil
</legend> 
</fieldset>



Mes CSS:

.fsques{
width:811px;
height:auto;
background:#f2f2f2;
border:1px solid #bfc2c3;
color:#000000;
padding:0 0 0 0;
margin:0 0 0 20px;
border:0;
}

legend
{

font-weight:bold;
color:#000000;
float:left;
width:811px;
}


Merci d'avance pour toute aide

Adam
A tout hasard, tu as testé un
text-align:right;

sur le "legend" au lieu du float ?
Modifié par Cancre (29 Jan 2013 - 18:07)
Bonjour Cancre,

merci pmour ta réponse. j'ai effectivement essayé ce que tu suggère, je viens de le refaire et çà ne fonctionne pas Smiley smile . je ne comprends pas trop l'origine de cette erreur. Est-ce que tu vois une autre solution?

Adam
Merci cancre pour ta réponse,

j'ai regardé de mon côté t çà ne marche pas. Pourtant dans le lien que tu as indiqué çà fonctionne. y-a-t-il des éléments dans ton document que je n'ai pas de mon côté? Sur une page uploader est-ce que çà marche?

ci-dessous le code html:


<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style type="text/css">

.fsques{
width:811px;
height:auto;
background:#f2f2f2;
border:1px solid #bfc2c3;
color:#000000;
padding:0 0 0 0;
margin:0 0 0 20px;
border:0;
}

legend
{

font-weight:bold;
color:#000000;
float:left;
width:811px;
text-align:left;
}

</style>
</head>

<body>


<fieldset class="fsques">
<legend  class="fsquesj">
Votre profil
</legend> 
content
</fieldset>
</body>
</html>



Ci-dessous le rendu sous ie7:

upload/48051-ie7.PNG

Cordialement,

Adam
Bonjour,

merci cancre pour ton aide et tes remarques. je n'ai pas trouvé de raison au problème . je vais créer un span et l'aligner en absolu; j'aurai préféré comprendre et utiliser le legende mais apparemment dans IE7 et IE6 mâme si on supprime les bordure, l'écart avec le coin supérieur gauche est conservé. Voici le CSS que je vais utiliser au final:


CSS:

.fsques
{
position:relative;
width:811px;
height:auto;
background:#f2f2f2;
border:1px solid #bfc2c3;
color:#000000;
padding:0 0 0 0;
margin:0 0 0 20px;
border-style:none;
border-spacing:0;
border:0;
text-align:left;


}

legend
{

font-weight:bold;
color:#000000;
text-align:left;
padding-bottom:10px;
}


legend span {display:block;position:absolute;top:0px;left:0px; }



HTML:


<fieldset class="fsques" >
<legend  class="fsquesj">
<span>Votre profil</span>
</legend> 
<p class="quesonly">
Contenu
</p>
</fieldset>
</body>
</html>



SI bien sûr quelqu'un a compris l'origine de cette erreur et comment la régler sans span, vos commentaires sont les bienvenus.


A plus,

Adam
En effet !

Y'a un petit erreur , c'est "text-align:right;" et non "left".

Pour ie7, la seul solution que je vois c'est d'utiliser un hack Smiley sweatdrop , c'est mal et ça te sortira une erreur si tu compte valider ton code. Mais bon si tu en est conscient et que ça te dérange pas...

*+html legend{/*hack ie7 */
 margin-left:-7px; 
}


Pour IE6, je trouve pas même avec hack.

Mais bon, sachant que IE7 est à utiliser à 3,65% dans le monde et a moins de 3% en europe, je pense pas qu'il y'a a encore beaucoup d'utilisateur de IE6.
merci cancre pour ton aide.

Je dois faire valider le code donc effectivement je ne peux pas utiliser de hack. Je vais me contenter du span. Je suis d'accord avec toi pour IE6 et 7 mais bon, le validateur ne sera pas daccord Smiley smile .

A un de ces 4,

Adam
Pour ie7 si tu veut pas de hack, tu peut aussi à l'aide de commentaires conditionnels spécifier une feuille de style pour les corrections 

<link href="styles.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]><link href="styles-ie.css" rel="stylesheet" type="text/css" /><![endif]-->



ou même si tu en as pas beaucoup insérer du CSS directement dans HTML

<!--[if IE 7]>
<style type="text/css">
legend{ margin-left:-7px;}
</style>
<![endif]-->
Sujet clos
Aller à