Coins arrondis et fieldset sur ie
Résolu
barale61
Messages postés
1126
Date d'inscription
Statut
Membre
Dernière intervention
-
barale61 Messages postés 1126 Date d'inscription Statut Membre Dernière intervention -
barale61 Messages postés 1126 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai un formulaire avec les coins arrondis qui ne s'affichent pas sur ie avec le fieldset mais par contre il fonctionnent bien avec les input. Il doit sagir d'un conflit mais lequel ?
Je vous remercie de votre aide.
J'ai un formulaire avec les coins arrondis qui ne s'affichent pas sur ie avec le fieldset mais par contre il fonctionnent bien avec les input. Il doit sagir d'un conflit mais lequel ?
Je vous remercie de votre aide.
<article class="miniForm">
<form action="" method="post">
<fieldset>
<legend>Contact rapide</legend>
<input type="email" placeholder="Votre email" required>
<textarea placeholder="Votre message"></textarea>
<input type="submit" value="Valider">
</fieldset>
</form>
</article>
/*MINI FORMULAIRE*/
article.miniForm {
margin-top: -15px;
margin-bottom: 10px;
}
.miniForm form {
padding: -10px 0 0 0;
}
/* CONDITION POUR FIREFOX */
@-moz-document url-prefix()
{
.miniForm form {
padding: 0 0 0 0;
margin-top: 15px;
margin-bottom: -5px;
}
}
/* FIN CONDITION */
.miniForm fieldset {
margin: auto;
padding:5px;
width:160px;
height: 170px;
border:1px solid #fff;
border-radius: 5px;
}
/* CONDITION POUR FIREFOX */
@-moz-document url-prefix()
{
.miniForm fieldset {
margin:10px auto;
padding:10px;
width:150px;
height: 154px;
border:1px solid #fff;
border-radius: 5px;
}
}
/* FIN CONDITION */
/* CONDITION POUR FIREFOX */
@-moz-document url-prefix()
{
.miniForm legend {
text-align: left;
color:#fff;
font-weight:bold;
margin-top: -10px;
}
}
/* FIN CONDITION */
.miniForm legend {
text-align: left;
color:#fff;
font-weight:bold;
margin-bottom: -10px;
}
.miniForm input {
margin:0;
padding:3px;
width:140px;
border:1px solid #ddd;
border-radius: 5px;
}
.miniForm textarea {
margin:0;
padding:3px;
width:140px;
height: 60px;
border:1px solid #ddd;
border-radius: 5px;
}
.miniForm input[type=submit]
{
float: right;
margin-right: 5px;
margin-top: 3px;
margin-bottom: 5px;
width:150px;
height:30px;
border-radius:5px;
color:#393939;
}
/* CONDITION POUR CHROME ET SAFARI */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.miniForm input[type=submit] {
float: right;
margin-right: 5px;
margin-top: -7px;
margin-bottom: 5px;
width:150px;
height:30px;
border-radius:5px;
color:#393939;
}
}
/* CONDITION POUR FIREFOX */
@-moz-document url-prefix()
{
.miniForm input[type=submit]
{
float: right;
margin: auto;
margin-top: -4px;
width:150px;
height:30px;
border-radius:5px;
color:#393939;
}
}
/* FIN CONDITION */
2 réponses
-
Bonjour
ca vient de IE quand fieldset contient legend
essaie
fieldset > legend { float:left; margin-top:-20px; } fieldset > legend + * { clear:both; }
ben dis donc il faudra qu'un jour tu me paie un coup !!!
pense aussi qu'une recherche google te donne aussi la solution de temps en temps -
Merci ça marche. Je suis en formation développeur web (au début) arrivé au css et html 5 donc je ne connais pas encore vu tout ça. Pour le coup, ça pose pas de problème mis à part la distance.
