Affichage IE et Chrome/Firefox

**thebestfriend** · 25/10/2012, 17h08

Bonjour,

Voilà, j'ai un petit soucis d'affichage entre IE et Chrome / Firefox.
Le but de ma page web est d'aligner mes champs input grâce à des div positionnées en absolute.
D'un coté (chrome et firefox), mes champs sont bien alignés.

De l'autre (ie), il en le sont pas.

Voici le code de ma page.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="iso-8859-1"/>
		<style type="text/css">
                        body {
                                position: relative;
                                font: 8pt arial;
                                margin:0;
                                padding:0;
                        }
                        
                </style>
		<title>clients_E</title>
	</head>
	<body>
		<div style='position:absolute;left:44px;top:68px;'>
			Nom
			<input type='text' size='15' maxlength='15'  />
		</div>
		<div style='position:absolute;left:29px;top:92px;'>
			Prénom
			<input type='text' size='20' maxlength='20' />
		</div>
		<div style='position:absolute;left:23px;top:116px;'>
			Adresse
			<input type='text' size='50' maxlength='50' />
		</div>
		<div style='position:absolute;left:14px;top:140px;'>
			Adresse 2
			<input type='text' size='50' maxlength='50' />
		</div>
	</body>
</html>

Auriez vous une petite idée d'où le problème ce pose ?
J'ai l'impression que la taille d'écriture est différente entre les navigateurs.

Merci

**Mahefasoa** · 25/10/2012, 18h08

Bonsoir,

Drôle de façon de travailler avec les éléments d'un formulaire!
En effet, il semble que IE fonctionne à 1px de moins (ou de plus) que les autres navigateurs.

Tu pourrais t'y prendre autrement, par exemple, en utilisant des balises <p> contenant <label> (pour l'intitulé ou le libellé si tu veux) et <input>:

les balises <p> auraient comme directives, position:relative; overflow:auto;
les <label> auraient comme directives, display:block; float:left; text-align:right; et un width:<largeur maxi pouvant contenir l'intitulé le plus long>px;

Et le tour est joué... en principe.

Sinon, si tu t'entêtes à rester dans le position:absolute; tu devrais ajuster chaque bloc individuellement et c'est assez contraignant je dois dire, à moins que tu adores la complexité.

Cordialement,
Mahefasoa

**Bovino** · 25/10/2012, 18h15

Déjà, ton doctype n'est pas cohérent avec le contenu...

**thebestfriend** · 25/10/2012, 18h31

@Mahefasoa:
Je comprends tout à fait, mais le but principal n'est pas d'aligner les champs.
En fait je donne la possibilité à un client de créer des formulaires. Il peut donc placer ses champs comme il le souhaite.
Donc pour positionné mes champs, j'utilise des div avec libellé et champ input, que je positionne en absolute. Donc je ne peux pas trop changé ma méthode de fonctionnement, car ça dépend du formulaire du client, des libellés choisi ....

@Bovino:
C'est à dire ? Peux tu être un peu plus précis ? Est-ce que ça peut avoir un impact avec le rendu des différents navigateurs ?

**Bovino** · 25/10/2012, 18h44

Code :

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

<meta charset="iso-8859-1"/>

Cette balise (ou plutôt ce contenu de balise) n'existe que pour HTML5.

Code :

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

<input type='text' size='15' maxlength='15'  />

cette notation pour les balises orpheline est celle du xhtml (aussi valide en HTML5 mais pas en HTML 4).

Je te conseille donc de modifier ton doctype en

Code :

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

<!doctype html>

et voir ce que cela donne car oui, c'est susceptible de perturber IE...

**NoSmoking** · 25/10/2012, 20h21

Le positionnement au pixel, avec une font potentiellement variable et les whitespace qui se promène je pense que tu auras de la chance si tu cadres tout cela aux petits oignons.

Tu pourrais obtenir le même résultat, ou pas loin en encadrant les textes avec des SPAN

Code html :

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

1
2
3
4
5
6
7
8
<div style='position:absolute;left:40px;top:68px;'>
	<span>Nom</span>
	<input type='text' size='15' maxlength='15'  />
</div>
<div style='position:absolute;left:40px;top:92px;'>
	<span>Prénom</span>
	<input type='text' size='20' maxlength='20' />
</div>

avec un CSS sur les SPAN

Code css :

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

1
2
3
4
5
 span{
   display:inline-block;
   width:60px;
   text-align:right;
 }

par exemple...

**Bovino** · 25/10/2012, 20h47

NoSmoking, quitte à utiliser le display inline-block (qui en soit est une bonne idée), autant le faire sur des éléments de type bloc dans la mesure où ce sont les euls pour lesquels la propriété est reconnue par IE6

Bon, ensuite, on peut aussi se dire que IE6, on s'en fout, mais là, ça ne coûte rien...

**NoSmoking** · 25/10/2012, 22h54

Envoyé par Bovino

...autant le faire sur des éléments de type bloc dans la mesure où ce sont les euls pour lesquels la propriété est reconnue par IE6

es tu sûr ? ne serait ce pas l'inverse IE6 reconnait le inline-block sur des éléments nativement en inline mais pas en block.

**Bovino** · 25/10/2012, 23h12

Nom de Zeus !
Tu as raison... au temps pour moi

**thebestfriend** · 26/10/2012, 11h37

Le principe de mettre le libellé dans un span est une bonne idée. Le seul HIC, c'est que je suis dépendant de l'utilisateur pour le nombre de caractère du libellé, et donc de la taille de mon span.

J'ai également refait ma page en HTML 4 valide W3C, mais aucun changement au niveau de l'affichage. J'ai remarqué que même la taille de mes champs de saisie était différente entre IE et Chrome/Firefox.

**NoSmoking** · 26/10/2012, 11h56

Il eut été bon que tu remettes le code modifié car si l'on respecte scrupuleusement les préconisations de Bovino le résultat devient identique, par exemple

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
body {
  position: relative;
  font: 8pt arial;
  margin:0;
  padding:0;
}
</style>
<title>clients_E</title>
</head>
<body>
  <div style='position:absolute;left:44px;top:68px;'>
    Nom
    <input type='text' size='15' maxlength='15'  />
  </div>
  <div style='position:absolute;left:29px;top:92px;'>
    Prénom
    <input type='text' size='20' maxlength='20' />
  </div>
  <div style='position:absolute;left:23px;top:116px;'>
    Adresse
    <input type='text' size='50' maxlength='50' />
  </div>
  <div style='position:absolute;left:14px;top:140px;'>
    Adresse 2
    <input type='text' size='50' maxlength='50' />
  </div>
</body>
</html>

**thebestfriend** · 26/10/2012, 12h11

Voici le code en HTML 4.01 valide W3C :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<style type="text/css">
                        body {
                                position: relative;
                                font: 8pt arial;
                                margin:0;
                                padding:0;
                        }
                </style>
		<title>clients_E</title>
	</head>
	<body>
		<div style='position:absolute;left:44px;top:68px;'>
			Nom
			<input type='text' size='15' maxlength='15'>
		</div>
		<div style='position:absolute;left:29px;top:92px;'>
			Prénom
			<input type='text' size='20' maxlength='20'>
		</div>
		<div style='position:absolute;left:23px;top:116px;'>
			Adresse
			<input type='text' size='50' maxlength='50'>
		</div>
		<div style='position:absolute;left:14px;top:140px;'>
			Adresse 2
			<input type='text' size='50' maxlength='50'>
		</div>
	</body>
</html>

Quand je test le code avec les préconisations de Bovino, le résultat est le même qu'avec mon code.
Comme expliquer les différences d'affichage entre IE et Chrome/Firefox, sachant que la déclaration du doctype est correcte ?
Et la réponse qui m’intéresse le plus est comment corriger ce soucis, en gardant en tête que les libellés ont une longueur que je ne peux définir ? :S

En tout cas merci du temps que vous passé à résoudre mon soucis