Coins arrondis et fieldset sur ie
Résolu
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.
