Affichage IE et Chrome/Firefox

Version imprimable

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.
http://bestfriend62143.free.fr/1.JPG
De l'autre (ie), il en le sont pas.
http://bestfriend62143.free.fr/2.jpg

Voici le code de ma page.

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
 
<!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

25/10/2012, 17h08
Mahefasoa
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
25/10/2012, 17h15
Bovino

Déjà, ton doctype n'est pas cohérent avec le contenu...
25/10/2012, 17h31
thebestfriend

@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 ?
25/10/2012, 17h44
Bovino

Code:

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

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

Code:

<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:

<!doctype html>

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

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:

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:

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

25/10/2012, 19h47
Bovino

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...
25/10/2012, 21h54
NoSmoking

Citation:

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 ;)

:koi: 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.
25/10/2012, 22h12
Bovino

Nom de Zeus !
Tu as raison... au temps pour moi :oops:
26/10/2012, 10h37
thebestfriend

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.

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:

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>

Voici le code en HTML 4.01 valide W3C :

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
 
<!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 :D

26/10/2012, 16h56
Bisûnûrs

Citation:

Envoyé par NoSmoking

en encadrant les textes avec des SPAN

Le label est pourtant tout indiqué quand il s'agit de .. labels de formulaires. ;)
30/10/2012, 19h14
NoSmoking

Citation:

Le label est pourtant tout indiqué quand il s'agit de .. labels de formulaires. ;)

Bon Dieu ! Mais c'est… ~~Bien sûr~~ Bisûnûrs!, pourquoi n'y ai je pas pensé ??