Bug input qui depasse sous IE

Question

Bonjour,
Je suis entrain de découper un site mais j'ai rencontré un problème sous IE7 que j'arrive pas à résoudre :

Voila mon problème en image :

Sous  FireFox : http://img8.hostingpics.net/pics/167659souff.jpg

Sous  Internet Explorer: http://img8.hostingpics.net/pics/163850souie.jpg

Le style ataché a ce input est :

    #form_annoncer input
    {
	    width:200px;
            height:36px;
 	    font-family:Tahoma, Geneva, sans-serif;
	    vertical-align:middle;
	    background:url(zone1.png) no-repeat;
	    border:0px;
	    margin:auto;
	    padding-left:14px;
	    padding-right:14px;
	    padding-top:9px;
    }

Sous FF, quand j'arrive à la fin de la zone de texte,, le texte continue sans déformer l'image derrière, alors que sous IE 7 le texte continue sans respecter le padding-right et l'image s'enfonce à gauche.

Merci de bien vouloir jeter un œil à mon problème, et me donner une solution ^^

Cordialement,

avion-f16 · Answer

Si ton image fait bien 200px sur 36, alors il faut que tu réduises avec les paddings de cette façon :
width = width - (padding-left + padding-right)
height = height - (padding-top + padding-bottom)
Donc pour toi :
#form_annoncer input {
    width:172px;
    height:27px;
    font-family:Tahoma, Geneva, sans-serif;
    vertical-align:middle;
    background:url(zone1.png) no-repeat;
    border:0px;
    margin:auto;
    padding-left:14px;
    padding-right:14px;
    padding-top:9px;
}

TheShadowEnd · Answer

Malheureusement c'est pas ça, ce genre de détails je le connais, mon image fait 228x36, et avec les 2 paddings left et right de 14 px mon width est de 200px.

Et ca marche toujours pas :S

olivier · Answer

overflow:hidden;

Bug input qui depasse sous IE

3 réponses

Votre réponse

Discussions similaires

Newsletters