Padding dans un input sur Opera

[Perrine]

Bonjour à tous,

Je réalise une barre de recherche dont voici un screen :

Le code HTML est

  <div id="recherche">
	<div>
	  <form action="#">
		<input id="rech-saisie" type="text" name="q" value="" size="20" accesskey="4" />
		<input id="rech-ok" type="submit" value="ok" />
		<span><a href="#">Recherche avancée</a></span>
	  </form>
	</div>
  </div>

La css

#recherche{

text-align:center;

background:#960A67 url(images/fleur-rech-gauche.gif) no-repeat 0 50%;

}

#recherche div{

height:100%;

background:transparent url(images/fleur-rech-droite.gif) no-repeat 100% 50%;

}

#recherche input{

margin:3px 1px;

font-weight:bold;

padding:1px 2px;

border:2px solid #FFD940;

background-color:#FFFFFF;

}

#recherche #rech-saisie{

padding-left:25px;

background-image:url(images/loupe.gif);

background-repeat:no-repeat;

}

#recherche #ok{

margin-top:4px;

}

#recherche span a{

position:relative;

bottom:6px;

font-size:0.8em;

font-weight:bold;

color:#FFFFFF;

}

Ma question :

J'ai mis un padding-left, dans #rech-saisie, pour décaler le début de la saisie et laisser la place de la loupe. Sur IE et FF, ça marche sans problème. Sous Opera, le padding-left n'est pas pris en compte donc le curseur se place sur la loupe ce qui n'est pas jojo.

J'ai lu qu'Opera avait des problème avec les padding-left et qu'il fallait définir le margin-left à 0. C'est ce que je fais tout le temps au début de ma feuille de style avec

*{

padding:0;

margin:0;

border:0;

}

Il semblerait donc que le problème soit ailleurs mais je ne trouve pas.

Je suis ouverte à toutes vos idées pour essayer de résoudre ça. Au pire, je peux toujours trouver un hack pour supprimer la loupe sous Opera je pense. Mais c'est dommage je trouve.

Merci !

[AntiStatic]

Salut,

c'est peut-être parce que tu as oublié les "px" :

*{

padding:0px;

margin:0px;

border:0px;

}

non ?

[Perrine]

Non parce que 0 c'est 0, peu importe l'unité utilisée

Je ne sais même pas si le problème auquel j'ai fait allusion (nécessité de définir le margin-left à 0 pour Opera) est la source de mon problème. Toutes les études de cas que j'ai lues faisait référence à des problèmes liés aux listes et non à un padding dans un input.

Merci en tous les cas

[xpatval]

Pas un hack, mais tu peux toujours afficher l'image de la loupe, et pas en background, juste avant la zone de saisie. Il ne te "reste" qu'à positionner cette zone, et jouer des border-left et right:none; ...

Que donne ta page et ta feuille de style au validateur ?

xpatval

[Perrine]

Bonne question le validateur... j'utilise pratiquement plus que l'extension HTML Validator basé sur Tidy. Il me valide ma page mais sur ton conseil, je suis allée voir sur le validateur du W3C et j'avais apparemment oublié de faire contenir mes input dans un div.

Mais, malheureusement, même après avoir réparé mon erreur, le bug persiste.

Quand tu proposes de positionner l'image de la loupe avant la zone de saisie, c'est faire sortir cette image de l'input pour la placer juste avant, c'est ça ? C'est une idée à laquelle j'avais aussi pensé mais moins joli en terme graphique

[xpatval]

Quand tu proposes de positionner l'image de la loupe avant la zone de saisie, c'est faire sortir cette image de l'input pour la placer juste avant, c'est ça ? C'est une idée à laquelle j'avais aussi pensé mais moins joli en terme graphique

C'était ça, oui.

C'est donc un problème qui est référencé ?

xpatval

[Perrine]

C'est donc un problème qui est référencé ?

Non pas encore trouvé là-dessus... juste ce fameux problème de padding-left dans Opera qui nécessite un margin-left à 0 pour que le padding soit bien en compte.

[Eric (11)]

Effectivement Opera ne gère pas les padding left et right dans un input (non corrigé également sur la 9 beta).

Tu pourrais soit placer l'image de fond sur la droite ou alors la désactiver lorsque le focus est sur le input.

Eric.

[Perrine]

Ah ok ben comme ça c'est dit :b_thumbsdown_20:

Dommage, j'aimais bien ma p'tite loupe. La solution avec le focus me plait bien, je n'y avais pas pensé !

Merci à vous 3 pour votre aide