Discussion :

[scoubi77]

Bonjour à vous tous,

Trouvant sympa le résultat de l'utilisation d'une balise <legend> au sein d'un formulaire, je cherche maintenant comment la rendre compatible dans Ie et Firefox !
En effet sous safari et Google chrome j'ai des bords arrondis mais pas sous Ie et Firefox
Peut être une maladresse dans l'écriture de mon code ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
fieldset {
 border:1px solid #FFFFFF;
   -border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;	
    padding-left:1px; 
    height:80px;
    width:400px;
     margin-bottom:1px;
 }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div align="center"><fieldset>
<legend align="right"><FONT FACE="monotype corsiva" size="4" color="white"> Captcha Vérification</FONT></legend>
 
<div style="text-align:center;"><div id="maDiv"></div></div></BR>
<div style="text-align:center;"> <script type="text/javascript">DrawBotBoot()</script></div></div></div></div></fieldset>

Merci par avance de vos réponses

[Bisûnûrs]

Ton code ne montre aucune utilisation des border-radius sur la balise legend.

[scoubi77]

Bonjour et merci pour ta réponse,

J'ai du mal décrire mon problème car c'est mon cadre du

fieldset

qui à perdu ses coins arrondis sous Ie 10 et Firefox depuis l'insertion de la balise

<legend>

toutes mes excuses !

[Bisûnûrs]

Essaie déjà de corriger ton code (ou de nous proposer un code valide si tu as mal simplifié), parce que dans l'état, l'imbrication de tes différentes balises est complètement foireux et la balise fieldset n'est pas fermée au bon endroit.

[scoubi77]

Merci pour cette réponse,

Pourtant ma balise fieldset encadre bien mes deux éléments que je souhaite encadrer !!! et la fermeture de cette dernière se fait bien à la fin de ces deux derniers !!!

[Bisûnûrs]

Ok, alors on va bien indenter ton code pour te montrer tes erreurs :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div align="center">
  <fieldset>
    <legend align="right"><FONT FACE="monotype corsiva" size="4" color="white"> Captcha Vérification</FONT></legend>
    <div style="text-align:center;">
      <div id="maDiv"></div>
    </div>
 
    </BR> <!-- erreur dans ta balise br -->
 
    <div style="text-align:center;">
      <script type="text/javascript">DrawBotBoot()</script>
    </div>
 
    </div> <!-- fin de div qui ne ferme aucun div -->
    </div> <!-- fin de div qui ne ferme aucun div -->
    </div> <!-- fin de div qui ne ferme aucun div -->
  </fieldset>
 
<!-- fin de div align center oubliée -->

[scoubi77]

Merci,
j'ai donc effectivement corrigé mon code qui comportait de multiples erreurs

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div align="center">
  <fieldset>
    <legend align="right"><FONT FACE="monotype corsiva" size="4" color="white"> Captcha Vérification</FONT></legend>
    <div style="text-align:center;">
      <div id="maDiv"></div>
    </div>
 
    <br/>
 
    <div style="text-align:center;">
      <script type="text/javascript">DrawBotBoot()</script>
    </div>
 
</fieldset></div>

et appliqué cette correction dans ma page, mais je n'ai toujours pas de coin arrondis sous Ie et Firefox !

[Bisûnûrs]

J'ai bien les coins arrondis qui s'affichent lorsque je corrige ton dernier problème, qui est le signe - devant border-radius.

[scoubi77]

Merci Bisûnûrs pour cette précision, cela à corrigé sous Firefox mais pas sous Ie !!!
Car sous Ie 10 j'ai toujours des coins carrés malgré le - retiré

[Bisûnûrs]

Il semble que ce soit un bug présent depuis la version 9 de IE. Tu peux corriger ça en passant ton legend en display:inline ou display:inline-block et de le repositionner à coup de position:relative et de top négatif (en mettant ces déclarations dans une feuille de style prévue pour IE9 et supérieurs.

[scoubi77]

Merci pour cette réponse,

Si j'ai bien compris en faisant comme cela ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!--[if !IE]><!-->
<style type="text/css">
legend {
 color:white;
 font-weight:bold
 align = left;
display:inline-block 
position:relative
}
</style>
<!--<![endif]-->

j'ai testé car je me suis fait une page de tests mais j'ai toujours des coins non arrondis

[JefReb]

onjour, je prends un peu le train en marche sur ce topic, mais je vois dans le css:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 border:1px solid #FFFFFF;
   -border-radius:10px;

Suis pas sûr que -border-radius soit approprié mais plutôt border-radius:10px;
Non? sans le tiret devant

[scoubi77]

Merci JefReb pour cette précision qui à déjà été relevé par Bisûnûrs mais qui hélas après correction n'a rien changé à mon problème

[Bisûnûrs]

Si j'ai bien compris en faisant comme cela ?

j'ai testé car je me suis fait une page de tests mais j'ai toujours des coins non arrondis

Elle dit quoi ta condition ?

[scoubi77]

Sauf erreur de ma part si c'est Ie !!! non ?

[Bisûnûrs]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<!--[if !IE]><!-->

Le ! veut dire "différent", revérifie comment utiliser les commentaires conditionnels.

[scoubi77]

Effectivement c'est mieux ainsi,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!--[if IE]>
<style type="text/css">
legend {
 color:white;
 font-weight:bold
 align = left;
display:inline-block 
position:relative
}
</style>
<![endif]-->]

Mais c'est pas pour autant que j'obtiens des coins arrondis sous Ie

[scoubi77]

Je fais des recherches depuis ce matin et après moultes recherches j'ai trouvé les Roundies pour IE, je continu reconnaissance !

[Bisûnûrs]

Mais c'est pas pour autant que j'obtiens des coins arrondis sous Ie

Mais c'est normal ! Ton code CSS est tout buggé ....

[scoubi77]

?