Discussion :

[xess91]

Bonjour à tous,

Je suis en train de faire un formulaire customisé, dans mon cas je souhaite arrondir les angles des champs, rien d'extra-ordinaire, mais ça me pose problème.

Sur ma page j'ai deux formulaire dont un que j'ai déjà customisé, sur celui pas de problème.

Par contre sur le deuxième j'ai un décalage entre les images et le input type texte.

Pour faire simple dans la customisation j'ai fait que deux corners au lieu des quatre conventionnels. Donc sur chaque corner, celui de gauche et celui de droite j'ai l'angle haut et bas sur la même image.

Voici le résultat que j'obtient sur les dernières version de différents navigateurs :

Opéra (c'est lui qui me pose problème):



Et pour Mozilla, Safari, G Chrome et IE8 c'est nickel.

Voici mon html:

Code :

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

1
2
 
<img src="images/corner_left.jpg" alt="" class="corner_left" /><input type="text" name="" class="inp" /><img src="images/corner_right.jpg" alt="" class="corner_right" />

et voici mon 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
 
.corner_left
	{
	position:relative;
	z-index:9;
	left:7px;
	top:2px;
	}
 
.corner_right
	{
	position:relative;
	z-index:9;
	left:-7px;
	top:2px;
	}
 
.inp
	{
        border:solid 1px #d1d0d0;
	width:250px;
	height:14px;
	font-size:13px;
	position:relative;
	z-index:8;
	}

Je précise que mes corners et mon input se trouvent dans une table (<table><tr><td></td></tr></table>)peut-être que cela a une incidence.

Pourquoi dois-je mettre une valeur à top de 2 px alors que la hauteur du input + les 2 pixels de bordure font 16px et que la hauteur de mes corners font aussi 16px, ils devraient s'aligner tout seul sur le plan horizontal.

Merci à tous pour vos réponses.

[FraK]

J'imagine que les borders de ton table sont bien réglés sur 0 ? ou que le cellspacing aussi ?

[xess91]

oui et aussi j'ai oublié de le mettre dans le css j'ai un margin:0px; et un padding:0px; sur le input.

Edit : La solution est vertical-align:bottom;