Décalage du texte dans un input

**serge-974** · 12/05/2010, 11h54

Bonjour,
J'ai mis mon code (page html, css, et screenshot) plus bàs, pour plus de compréhension ...

J'ai un input qui contient du texte, et ce texte est internationalisable (sa valeur peut changer). Cependant, j'ai un décalage (padding ?) du texte, comme si il y avait un padding de chaque coté de l'input d'environ 10px sur IE7.

Comment enlever ce "décalage" ? Car sinon , mon bouton est trop grand !
Je précise que je n'ai pas ce décalage sous IE8, FIREFOX ...

screenshot :
IE7 :

IE8:

index.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel="stylesheet" href="css.css">
	</head>
	<body>
		<div id="div_signup">
			<div class="signup_left"></div>
			<div class="signup_mid">
				<div class="buttons SignUpButton">
					<input type="submit" value="Sign up" class="test"/>
				</div>
			</div>
			<div class="signup_right"></div>
	</body>
</html>

css.css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
.div_signup{
	display:inline-block;
}
.signup_left{
	display:inline-block;
	background: url('signup_left.png');
	background-position:0px 0px;
	width: 14px;
	height: 48px;
	float:left;
}
.signup_mid{
	display:inline-block;
	height: 48px;
	background: url('signup_center.png');
	background-position:0px 0px;
	background-repeat: repeat-x;
	float:left;
}
.signup_right{
	display:inline-block;
	background: url('signup_right.png');
	background-position:0px 0px;
	width: 14px;
	height: 48px;
	float:left;
}
.test{
background:transparent;
border:0;
font-size:22px;
font-weight:bold;
color:#fff;
text-align:center;
line-height:40px;
margin:0;
padding:0;
}

Merci d'avance pour toute vos réponses

Edit : Je tiens à préciser, que la manière d'encadrer mes divs, et notamment, mon input, son obligatoire ! Je suis obliger de passer par un input . Si vos solutions sont de ne pas passer par un input (choses que j'aurais déjà faite si je pouvais), elle ne me seront pas utiles

.

**nico le noob** · 12/05/2010, 14h00

essaye de donner une valeur a .test genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.test
{
width:14px;
height:48px;
}

Cdt

**serge-974** · 12/05/2010, 14h29

Si j'ajoute un width, mon texte ne sera plus internationalisable... De plus, Lorsque j'ai ajouté le width, mon texte est coupé .

Décalage du texte dans un input

CSS

Vue hybride

Discussions similaires

Partager

Partager