Discussion :

[Bisûnûrs]

Code :

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

1
2
3
4
5
color:white;
 font-weight:bold
 align = left;
display:inline-block 
position:relative

?

[scoubi77]

Merci pour ta proposition de correction, mais malgré cela j'ai toujours pas de coins arrondis

[NoSmoking]

Bonjour,

Merci pour ta proposition de correction

Bisûnûrs dans sa grande mansuétude t'a indiqué le code CSS qui pose problème mais pas la solution.

L'apprentissage du minimum ne devrait pas te prendre la journée

Il existe aussi une solution de validation http://jigsaw.w3.org/css-validator/, un réflexe toujours bon à avoir.

[scoubi77]

Bonsoir à vous deux j'ai réussi à obtenir sous ie des bords arrondis moche mais vaguement arrondis car,
Par défaut, Internet Explorer présente les cadres avec des coins arrondis et une couleur de bord grisée prédéfinie.
Si l'on change la couleur en redéfinissant l'attribut border, il perd ses attributs par défaut et présente une forme carrée.
Et IE ne dispose pas d'attribut pour arrondir les coins comme Firefox. On peut alors modifier les attributs de border pour les autres navigateurs, en excluant IE.
mais je tombe sur la suite un deuxième effet kisscool, à savoir que mon <legend> est totalement collé à droite !!!
peut t'on décaler vers la gauche de quelques pixels quand on aligne à droite ?

voici un screen :

Code :

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
<!--[if !IE]><!-->
<style type="text/css">
 
fieldset {
 
border:1px solid white;
 
     border-radius:30px;
     -moz-border-radius:10px;
     -webkit-border-radius:10px;	
 
 }
</style>
<!--<![endif]-->
 
 
<div align="center">
  <fieldset style="width:400px; height:80px;">

[NoSmoking]

Maintenant il te faut jouer avec padding-right ou margin-right.

[scoubi77]

Merci pour ta réponse,

J'ai justement ajouté margin-right = "12px"; mais quelque soit la valeur en px il reste englué à la même place ! mais que sous Ie pas chez les autres !!!

[NoSmoking]

A la limite tu peux écrire dans ta balise style="padding-right:20px;", mais pas ton horreur.

Il serait peu être temps que tu arrêtes le style inline.

[scoubi77]

toutes mes excuses, en fait j'avais bien au départ

Code :

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

padding-right:20px;

dans le css du legend, cela ne fonctionnant pas j'ai essayé de l'écrire différemment.
j'ai donc incéré dans la balise legende

Code :

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

<legend style="padding-right:20px;">

et ça fonctionne sous ie mais pas du tout à la même place dans les autres navigateurs ! une idée ?

[Bisûnûrs]

Oui, donc en fait tu as laissé tomber la solution que je t'ai proposée, au final.

Tu devrais nous indiquer ton code complet, minimal pour ton problème et fonctionnel que tu as maintenant, qu'on se remette à la page (donc pas le code complet de ta page, mais le code complet du problème).

[JefReb]

Pour les coins arrondis sous IE, ne faudrait-il pas utiliser PIE?
http://css3pie.com/
ça marche très bien ...

[Bisûnûrs]

Pourquoi utiliser un hack lourd alors que IE comprend très bien le border-radius depuis sa version 9 ?

[scoubi77]

Bonjour à vous tous,

j'avais bien trouvé pour la solution avec Pie mais je dois très certainement me tromper dans le lien de la bibliothèque car je n'obtient pas l'affichage de l'effet
Là est mon problème Bisûnûrs, car effectivement depuis Ie9 je ne devrais pas rencontrer ce problème car avant l'utilisation de la balise <legend> sur tous les navigateur j'avais de beaux coins arrondis !!! je te remercie de ta proposition, voici donc la partie qui me pose problème.

Code :

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

1
2
3
4
5
6
7
8
9
10
fieldset {
border:1px solid white;
     border-radius:10px;
     -moz-border-radius:10px;
     -webkit-border-radius:10px;	
}
legend {
color:white;
 font-weight:bold
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div align="center">
  <fieldset style="width:400px; height:80px;">
    <legend align="left"><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>

Merci par avance

[Bisûnûrs]

Au risque de me répéter ....

Tu devrais nous indiquer ton code complet, minimal pour ton problème et fonctionnel que tu as maintenant, qu'on se remette à la page (donc pas le code complet de ta page, mais le code complet du problème).

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.

On fera pas le boulot à ta place. Je t'ai donné des indications que j'ai testées et qui fonctionnent. On te mettra juste sur le chemin pour que tu utilises ces indications pour résoudre ton problème.

[scoubi77]

Merci pour ces précision et je n'ai me semble t'il demandé à personne de bosser à ma place, sauf que depuis deux jours je pédale dans le yaourt.
J'ai essayé ce que tu m'as proposé !

Citation Envoyé par 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.

mais je n'arrive pas à le mettre en forme donc je continu à chercher de mon coté et tout essayer pour tenter de m'en sortir comme un grand !

Pour charger seulement pour ie il faut utiliser :

Code :

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

1
2
3
4
5
 <!--[if IE]>
 <style type="text/css">
 
 </style>
 <![endif]-->

mais malgré tout cela je n'y arrive pas, je continu donc à chercher avec mes maigres connaissances

Code :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
<style type="text/css">
legend {
color:white;
 font-weight:bold
 
 
}
</style>
 <!--[if IE]>
 <style type="text/css">
legend {
color:white;
 font-weight:bold
 display:inline-block
 
}
 </style>
 <![endif]-->
 
 
 
<style type="text/css">
 
fieldset {
border: 1px solid #fffff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
 
 
 }
</style>

Mon legend est à la bonne place (centré right) dans tous les navigateurs mais je continu malgré tout à ne pas obtenir des coins ronds dans Ie

[Bisûnûrs]

Et rien ne te dérange dans le code CSS pour IE que tu nous montres ? Aucune erreur de syntaxe particulière à déclarer ?

[scoubi77]

Code :

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

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

Le .legend surement ! mais comme je m'oblige pour progresser à ne pas utiliser le copier, coller je fais des erreurs d'écriture, effectivement en ajoutant des points j'obtiens la meme chose que hier soir, des coins arrondis " moche " et mon texte collé tout à droite.
donc je vais maintenant chercher comment à grand coup de top négatif déplacer mon texte

[scoubi77]

Suivant tes indications afin de décoller mon texte du bord droit supérieur j'ai donc ajouté ceci :

Code :

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

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

Mais il reste Ventousé et englué au bord supérieur droit malgré et quelque soit la valeur affectée au top !
j'ai même essayé de le mettre directement ici :

Code html :

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

<legend align="right" style="top:60px;"><FONT FACE="monotype corsiva" size="4" color="white"> Captcha Vérification</FONT></legend>

mais ça ne change rien et surtout le plus drôle c'est que maintenant je n'ai QUE des coins arrondis dans Ie plus dans ( Safari, Firefox et Google chrome ) ( c'est nerveux ! )

[Bisûnûrs]

Indices :

- A quoi sert le point devant un sélecteur CSS ?
- Comment séparer les différentes déclarations CSS ?

Prérequis pour répondre à ces questions :

Avoir les bases du CSS.

[scoubi77]

Je te remercie infiniment pour le temps que tu m'as accordé et je te souhaite une excellente fin de journée