Affichage IE et Chrome/Firefox

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

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, 17h08

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, 17h15

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

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

@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, 17h44

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, 19h21

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

Affichage IE et Chrome/Firefox

HTML

Vue hybride

Discussions similaires

Partager

Partager