Coins arrondis et fieldset sur ie

Résolu/Fermé
barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 - 3 juin 2015 à 18:27
barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 - 4 juin 2015 à 15:39
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.

<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 */
A voir également:

2 réponses

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
3 juin 2015 à 21:31
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
0
barale61 Messages postés 1192 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 avril 2024 110
Modifié par barale61 le 4/06/2015 à 15:40
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.
0