affichage sur IE XP pack3

redoran · 02/03/2011, 07h42

Bonjour ; j'ai un problème d'affichage de ma page web :
sur FixeFox c'est impecable mais sur IE tous s'affiche en grand c'est vraiment du

sachant que j'ai une page HTML et une autre styles.css
styles.css

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
body
{
   width: 760px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
   /*background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
    font-size: 100%;
	background-color:  #626266;
}
/* L'en-tête */
 
#en_tete
{
   width: 760px;
   height: 100px;
   background-color: #f60000;
   text-align: center; /* Pour centrer le titre */
   font-family: Arial, Verdana, serif; /* On essaie d'avoir Arial Black en priorité */
   font-size: 100%;
   color:#ffffff;
 
 
}
/* Le corps de la page */
#corps
{
   /*margin-left: 00px;*/
   margin-bottom: 20px;
   padding: 5px;
   color: #000000;
   background-color: #ffffff;
  /* background-image: url("images/motif.png");*/
  /* background-repeat: repeat-x;*/
   font-size: 100%;
   border: 2px solid black;
}
#monForm
{
width: 60%;
}
#monForm p
{
margin: 2px 0;
}
#monForm fieldset:hover
{
background-color: #FFF;
}
#monForm fieldset legend
{
padding: 0 10px;
border-left: #CCC 1px solid;
border-right: #CCC 1px solid;
font-size: 1.2em;
color: #000000;
}
/* Label aligné les label + couleurs orange*/
#monForm label
{
background-color:  #626266;
display: block;
width: 39%;
float: left;
padding-right: 1%;
text-align: right;
letter-spacing: 1px;
}
/*survole des labels*/
#monForm label:hover
{
font-weight: bold;
}
#monForm .form_label_nostyle
{
background: none;
}
/* Input */
 
#monForm input:hover , #monForm input:focus
{
border: #999 1px solid;
background-color: #DDEEFF;
}
#pied_de_page
{
   padding: 5px;
   clear: both;
 
   text-align: center;
 
   color: #B3B3B3;
   background-color: #626262;
   /*background-image: url("images/motif.png");
   background-repeat: repeat-x;*/
   font-size: 100%;
   border: 2px solid black;
}

merci

ornitho13 · 02/03/2011, 08h48

Salut,

concrètement qu'est ce qui ne va pas sur ta page ? Là tu nous dis que le rendu sous IE est mauvais mais on ne sait pas quoi en soit.

Peux tu fournir une url ou le code HTML, histoire de se rendre compte ?

merci

Bisûnûrs · 02/03/2011, 09h33

Es-tu sûr que le zoom de ton navigateur est bien à 0 ?

Ctrl - pour dé-zoomer (il n'y a pas de combinaison pour remettre à 0 sur IE).

redoran · 02/03/2011, 12h33

Re; voila code

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
36
37
38
39
40
<!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>Bienvenue sur 3Sgrip</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" title="index" href="../styles/index.css" />
 
</head>
 
<body>
<div id="en_tete">
   <!-- Ici on mettra la bannière -->
   <h1> 3 SGRIP <h1 />
</div>
<div id="corps">
<form id="monForm" action="#" method="post">
<fieldset>
<legend>Authentifcation :</legend>
<p>
<label for="form_firstname">Utilisateur : </label>
<input type="text" id="form_firstname" name="firstname" value="" size="20" maxlength="15" tabindex="1" />
</p>
<p>
<label for="pw">Mot de passe : </label>
<input type="password" id="pw" name="pw" value="" size="20" maxlength="15" tabindex="2"/>
</p>
<p>
<p align="center">
<input type="submit" value="Connexion"/> <input type="reset" value="Annuler" />
</p>
</div>
<div id="pied_de_page">
   <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
   <p>Copyright  	©"Redouaneweb" 2005, tous droits réservés</p>
 
</div>
 
<form/>
</body>
</html> xhtml

meme avec ctrl - sa ne marche pas
sa donne ça

Bisûnûrs · 02/03/2011, 13h59

Ta balise h1 est mal fermée. Du coup IE pète un peu un boulon est intègre tout le reste de ton site dans cette balise. Ta police prend donc la taille celle de l'élément h1.

redoran · 02/03/2011, 15h41

re; merci busy oui effectivement c'était ça <h1> 3 SGRIP <h1 /> l'erreur et la solution bien sur </h1>.
il demeure toujours un problème d'alignement des inputs que je n'arrive pas a réglé. !!!!!!
je me demande aussi comment réglai les bugs d'IE ....! une piste sa sera la bien venue . merci

ornitho13 · 02/03/2011, 17h24

Il ya un problème dans ta strucure html. Il manque des tags (fieldset , form mal fermé, etc...)

Voici le code de ton body mis a jour :

Code html :

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
 
<body>
	<div id="en_tete">
	   <!-- Ici on mettra la bannière -->
	   <h1> 3 SGRIP </h1>
	</div>
	<div id="corps">
		<form id="monForm" action="#" method="post">
			<fieldset>
				<legend>Authentifcation :</legend>
				<p>
					<label for="form_firstname">Utilisateur : </label>
					<input type="text" id="form_firstname" name="firstname" value="" size="20" maxlength="15" tabindex="1" />
				</p>
				<p>
					<label for="pw">Mot de passe : </label>
					<input type="password" id="pw" name="pw" value="" size="20" maxlength="15" tabindex="2"/>
				</p>
				<p align="center">
					<input type="submit" value="Connexion"/> <input type="reset" value="Annuler" />
				</p>
			</fieldset>
		</form>
	</div>
	<div id="pied_de_page">
	   <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
	   <p>Copyright  	©"Redouaneweb" 2005, tous droits réservés</p>
	</div>
</body>

A partir de là regarde si tu as toujours tes problèmes d'alignement.

NoSmoking · 02/03/2011, 18h16

Bonjour,
si tu parles de l'alignement de tes INPUT type=text, comme tu as eu la bonne idée de mettre des LABEL affectes leur, par exemple, comme style

Code :

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

1
2
3
4
5
label {
  width : 150px;
  float : left;
  padding-left : 10px;
}

ou plus complètement

Code :

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

1
2
3
4
5
6
label {
  display : block;
  width : 150px;
  float : left;
  padding-left : 10px;
}

redoran · 05/03/2011, 11h36

Bonjour ,merci pour vos intervention et malgré les correctifs ,le problème persiste encore .je crois que c'est le Bug du IE !!!
selon la littérature que la mise en forme d'une page par les tableaux est déconseillé mais je crois qu'elle est la seul solution pour réglé le problème du bug du IE!!!!!

NoSmoking · 05/03/2011, 16h58

essaies ce lien, Exemples de formulaires sans tableau de mise en forme

redoran · 06/03/2011, 13h38

Bonjour ; merci nosmoking pour le lien

02/03/2011, 08h48	#2
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	Salut, concrètement qu'est ce qui ne va pas sur ta page ? Là tu nous dis que le rendu sous IE est mauvais mais on ne sait pas quoi en soit. Peux tu fournir une url ou le code HTML, histoire de se rendre compte ? merci
	00

02/03/2011, 09h33	#3
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Es-tu sûr que le zoom de ton navigateur est bien à 0 ? Ctrl - pour dé-zoomer (il n'y a pas de combinaison pour remettre à 0 sur IE).
	00

02/03/2011, 13h59	#5
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Ta balise h1 est mal fermée. Du coup IE pète un peu un boulon est intègre tout le reste de ton site dans cette balise. Ta police prend donc la taille celle de l'élément h1.
	00

02/03/2011, 15h41	#6
redoran Membre expérimenté Developpeur- Amateur Inscription : juin 2010 Messages : 946 Détails du profil Informations personnelles : Sexe : Âge : 40 Localisation : Algérie Informations professionnelles : Activité : Developpeur- Amateur Secteur : Santé Informations forums : Inscription : juin 2010 Messages : 946 Points : 557 Points : 557	re; merci busy oui effectivement c'était ça <h1> 3 SGRIP <h1 /> l'erreur et la solution bien sur </h1>. il demeure toujours un problème d'alignement des inputs que je n'arrive pas a réglé. !!!!!! je me demande aussi comment réglai les bugs d'IE ....! une piste sa sera la bien venue . merci
	00

05/03/2011, 11h36	#9
redoran Membre expérimenté Developpeur- Amateur Inscription : juin 2010 Messages : 946 Détails du profil Informations personnelles : Sexe : Âge : 40 Localisation : Algérie Informations professionnelles : Activité : Developpeur- Amateur Secteur : Santé Informations forums : Inscription : juin 2010 Messages : 946 Points : 557 Points : 557	Bonjour ,merci pour vos intervention et malgré les correctifs ,le problème persiste encore .je crois que c'est le Bug du IE !!! selon la littérature que la mise en forme d'une page par les tableaux est déconseillé mais je crois qu'elle est la seul solution pour réglé le problème du bug du IE!!!!!
	00

05/03/2011, 16h58	#10
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 930 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 930 Points : 4 744 Points : 4 744	essaies ce lien, Exemples de formulaires sans tableau de mise en forme
	00

06/03/2011, 13h38	#11
redoran Membre expérimenté Developpeur- Amateur Inscription : juin 2010 Messages : 946 Détails du profil Informations personnelles : Sexe : Âge : 40 Localisation : Algérie Informations professionnelles : Activité : Developpeur- Amateur Secteur : Santé Informations forums : Inscription : juin 2010 Messages : 946 Points : 557 Points : 557	Bonjour ; merci nosmoking pour le lien
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email