culture [HTML][CSS][IE] le texte vient pas dans input

[Roooh]

Bonjour à tous !

Voici, j'ai un petit problème mais qui s'avère très important.

J'ai des input type="text", sur Opera, FF ou autre j'arrive a y écrire du texte, normal vous allez me dire sauf sur IE 11 ...

Le texte n'apparait pas du tout sur IE, sauf quand j'enlève la classe à l'input. Je comprends pas pourquoi ni comment le css bloque la saisi du texte

Je vous serais très reconnaissant de m'aider, j'ai élaboré tout un outil et il ne marche donc pas sur IE.
Merci

Le code

/* Style des input */
.input {
    color:#000000;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:500;
    font-size: 17px;
    border-radius: 0;
    line-height: 22px;
    background-color: #fbfbfb;
    padding: 13px 8px 13px 8px;
    margin-top:-3px;
    margin-bottom: 2px;
    width:230px;
    height:22px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border: 3px solid rgba(0,0,0,0);
}
.input:focus{
    background: #fff;
    box-shadow: 0;
    border: 2px solid #e42424;
    margin-top:-3px;
    margin-bottom: 3px;
    color: #000000;
    outline: none;
    padding: 13px 8px 13px 8px;
}

 

[Arclite_115]

Bonjour,

chez moi ce sont les propriétés suivantes qui posent problème (y compris sous FF) :

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

 

[Roooh]

Salut et merci de ta réponse rapide !

Admettons que je les retires, ça n'y fait rien.

Du coup j'ai tenté de retirer les propriétés css une après l'autre, et l'erreur n'est pas corrigée. Par contre quand je retire le class="input" de l'input ça marche.
Je vais tenté de changer le nom de la classe...

 

[Bakoff]

BOOSTRAP FOR THE WIN ! Pardon, je m'emporte.

Elles servent à quoi ces options citées par arclite ? bizarre qu'elles commencent par un tiret

 

[Arclite_115]

Salut et merci de ta réponse rapide !

Admettons que je les retires, ça n'y fait rien.

Du coup j'ai tenté de retirer les propriétés css une après l'autre, et l'erreur n'est pas corrigée. Par contre quand je retire le class="input" de l'input ça marche.
Je vais tenté de changer le nom de la classe...

Chez moi ça fonctionne très bien que ça soit sous IE11 / FF 36 ou Chrome sans les options citées. :insit-1d80:

 

[Roooh]

Lorsque je change le nom de la classe dans le input et le css, il ne voit plus aucuns style.
A croire que c'est le mot "input" dans le style qui bloque IE



OUUUUIIIIII ca marche les coupains !

En effet sans les options cités, (et sans enlever un ";" de trop), effectivement ça marche Ahahah
Mais quel boulet ....

Vraiment merci, merci, merci !!!

 

[Pims64]

Impecc!!
N'oublie pas de passer en Résolu

Bonne journée

 

[Roooh]

Evidemment, sur mon autre page html + un autre css je rencontre le meme problème, et cette fois avec les nouvelles propriétés de mon 1er problème... Je vais chercher

 

[Arclite_115]

Perso j'évite toujours d'utiliser des noms de balises dans mes classes ou id ça évite bien des confusions. J'adopte le plus possible des noms logiques qui me permettent de m'y retrouver plus facilement.

Il ne faut pas non plus être avare sur les commentaires !

 

[Roooh]

Voila du coup j'ai rectifié le tire, et j'ai remplacé le nom de cette classe par zone-texte qui est plutôt ... basique, mais on dira que ça passe Ahah

bref, là c'est le height: xx px; qui fout la Mongolie la dedans. La source du problème est localisé, merci à vous, et c'est vrai que j'ai toujours un train (voir 2) de retard sur les commentaires.

Le problème est vraiment résolu !!!
IE n'aime pas le line-height et le height, j'ai modifié les valeurs de ceux ci pour avoir quelque chose de plus cohérent (pour IE) et c'est bon

Merci encore de votre aide