28172 sujets

CSS et mise en forme, CSS3

[Resolu] Input text différence entre Firefox2 et Firefox3

Bonjour,

Je ne comprend pas pourquoi il y a une si grande différence entre Firefox 2 et Firefox 3 avec les inputs texts.

Je dois créer un input text avec coin arrondis ces coins sont en image.

Je n'arrive pas à supporter les deux firefox tellement il y a une grande différence. Je vous joins des photos d'écran.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>test</title>
	
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	
<style type="text/css"><!-- /* <![CDATA[*/

* {margin:0; padding:0;}

input.txt {border:solid red; border-width:1px 0; height:15px; margin-bottom:10px; width:215px;}
img.inp {position:relative; top:-7px;}
* html img.inp {top:-6px;} /* ie 6 */
*+html img.inp {top:-6px;} /* ie 7 */

/* ]]> */ --></style>

</head>

<body>

<form action="">

<img src="images/input-left.gif" width="5" height="17" alt="" class="inp" /><input type="text" id="identifiant" class="txt" /><img src="images/input-right.gif" width="5" height="17" alt="" class="inp" />

</form>

</body>
</html>


Firefox 2
upload/16393-firefox2.png

Firefox 3
upload/16393-firefox3.png
Modifié par britanicus75 (06 Oct 2008 - 22:36)
Modérateur
bonsoir,

un vertical-align ne permettrait t-il pas d'aligner les 2 images et l'input , ce sont des éléments de type inline , non ?

a tester :

input.txt {border:solid red; border-width:1px 0; height:15px; margin-bottom:10px; width:215px;}

img.inp , input.txt {vertical-align:top;}


A voir ensuite d'un nav a l'autre et selon les polices et tailles d'affichages ce que cela donne .

GC
Effectivement ca semble très bien pour l'instant.

Merci, pourtant c'est tout simple... je n'y avait pas pensé !
Sujet clos
Aller à