Bug input qui depasse sous IE
TheShadowEnd
Messages postés
12
Statut
Membre
-
olivier -
olivier -
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,
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,
Configuration: Windows XP Firefox 3.5.3 Internet Explorer 7.0.5730.13
3 réponses
-
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; } -
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 -
