differences entre IE7 et FF input et img que faire ?

Version imprimable

Bonjour à tous,
Désolé pour le titre. Je le trouve pas du tt explicite, enfin bon.

Alors voilà, je débute en tout mais je progresse vite cligne et je rencontre qq difficultées pr coder pr IE7 (c'est horrible)

Donc mon pb est simple: que faire sur ce code pour avoir une présentation presque identique entre FF et IE 7 (et 6 aussi olala le casse tête). Il rest qq callages sur FF mais l'esprit est bon

Merci de votre aide à vous les pros cligne

Code:

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mon compte</title>
<style>
div#mon_compte {
        width: 151px;/*largeur de la bote mon compte*/
        height: 102px;/*hauteur de la boite mon compte*/
        border:  1px solid #cccccc;/*bordure grise de la boite*/
        padding: 10px;/*marge interne à la boite de 10 pixels*/
        margin: 10px;/*marge extérieure de la boite de 10 pixels*/
        font-size:8px;
        color:#333333;
        text-align:center;
}
div#mon_compte a {
        font-size:9px;
        color:#333333;
        text-decoration:none;
}
div#mon_compte a:hover {
        font-size:9px;
        color:#333333;
        text-decoration:underline;
}
.class_input {
        font-family:"arial",verdana, Trebuchet MS, sans-serif;/*police pour input*/
        font-size:9px;/*taille police input*/
        text-align:right;/*texte aligné à droite*/
        background-color:#ffffff;/**/
        color:#999999;
        padding:0px;
        margin-top: 5px; /*margin entre les 2 input de mon compte*/
}
img {
        padding: 4px;
}
</style>
</head>
 
<body>
<div id="mon_compte">
	<img src="http://img398.imageshack.us/img398/1027/moncomptezi9.jpg" alt="" />
	<img src="http://img236.imageshack.us/img236/3263/traitseparationje9.jpg" alt="" />
	<form action="" method="post" id="connex" >
		<input type="hidden" name="action" value="connexion" />
		<input name="email" type="text" class="class_input" size="26" maxlength="30" value="Votre adresse email" />
		<input name="motdepasse" type="text" class="class_input" size="26" maxlength="30" value="Votre mot de passe" />
		<!--<a href="javascript:document.getElementById('connex').submit()"><img src="" /></a>-->
		<br />
		<img src="http://img236.imageshack.us/img236/3263/traitseparationje9.jpg" alt="" />
		<a href="" title="Inscrivez vous sur">S'inscrire </a>&nbsp;
		<a href="" title="Retrouvez votre mot de passe">Mot de passe oublié?</a>
	</form>
</div> 
</body>
</html>

26/07/2007, 13h55
Strix

Salut

On ne sait même pas quels sont les problèmes !
Soit plus explicite, merci ;)
26/07/2007, 14h29
epock29

en réalité je n'obtiens par le même résultat entre IE et FF avec ce code. Il y a des grosses différences de callage entre les 2 navigateurs.

Et je crois que le plus simple c'est de tester le code directement (les images sont hébergées donc un simple copier coller et hop)

:salut:
Essaie ceci :

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mon compte</title>
<style type="text/css">
/*CSS à coller*/
</style>
</head>
 
<body>
<div id="mon_compte">
	<img src="http://img398.imageshack.us/img398/1027/moncomptezi9.jpg" alt="" />
	<img src="http://img236.imageshack.us/img236/3263/traitseparationje9.jpg" alt="" />
	<form action="" method="post" id="connex" >
		<input type="hidden" name="action" value="connexion" />
		<input name="email" type="text" class="class_input" size="26" maxlength="30" value="Votre adresse email" />
		<input name="motdepasse" type="text" class="class_input" size="26" maxlength="30" value="Votre mot de passe" />
		<br />
		<img src="http://img236.imageshack.us/img236/3263/traitseparationje9.jpg" alt="" />
		<a href="" title="Inscrivez vous sur">S'inscrire </a>&nbsp;
		<a href="" title="Retrouvez votre mot de passe">Mot de passe oublié?</a>
	</form>
</div> 
</body>
</html>

Code:

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
40
41
* {
margin:0;
padding:0;
}
 
#mon_compte {
width:151px;/*largeur de la bote mon compte*/
height:110px;/*hauteur de la boite mon compte*/
border:1px solid #ccc;/*bordure grise de la boite*/
padding:10px;/*marge interne à la boite de 10 pixels*/
margin:10px;/*marge extérieure de la boite de 10 pixels*/
font-size:8px;
color:#333;
text-align:center;
}
 
#mon_compte a {
font-size:9px;
color:#333;
text-decoration:none;
}
 
#mon_compte a:hover {
font-size:9px;
color:#333;
text-decoration:underline;
}
 
.class_input {
font: normal 9px "arial",verdana, Trebuchet MS, sans-serif;/*police pour input*/
text-align:right;/*texte aligné à droite*/
background-color:#fff;/**/
color:#999;
padding:0px;
margin-top: 5px; /*margin entre les 2 input de mon compte*/
border:solid 1px #aaa;
}
 
img {
padding:4px;
}