Site différent avec FF et IE (CSS)

Version imprimable

Bonjour tout le monde,

J'ai un site web qui se présente différemment de FF à IE 7 (voir les deux miniatures attachées).

Je pense que le problème vient du fichier css que voici :

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
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/* Global Styles */
 
body {
	margin:0px;
	}
 
td {
	font:11px Arial, Helvetica, sans-serif;
	color:#666666;
	}
 
a {
	color: #993300;
	}
 
a:hover {
	color: #5C743D;
	}
 
/* ID Styles */
 
#navigation td {
	border-bottom: 1px solid #F4FFE4;
	}
 
#navigation a {
	font: bold 11px Arial, Helvetica, sans-serif;
	color: #D5EDB3;
	line-height:16px;
	letter-spacing:.1em;
	text-decoration: none;
	display:block;
	padding:8px 6px 10px 20px;
	}
 
#navigation a:hover {
	background: #99CC66;
	color:#993300;
	}
 
#logo 	{
	font:24px Arial, Helvetica, sans-serif;
	color: #5C743D;
	letter-spacing:.2em;
	line-height:30px;
	}
 
#tagline 	{	
/*<!--LA LIGNE CI-dessous c'est pour la date de la délibération-->*/
	font:11px Arial, Helvetica, sans-serif;
	color: #993300;
	letter-spacing:.4em;
	line-height:18px;
	}
 
#monthformat {
	border-bottom: 1px dashed #5C743D;
	}
 
#dateformat {
	font:11px Arial, Helvetica, sans-serif;
	color: #993300;
	letter-spacing:.2em;
	}
 
#dateformat a {
/*C'est ici que l'on change la taille des caractčres pour le matricule, nom et prénom de l'étudiant*/
	font:30px Arial, Helvetica, sans-serif;
	color: #993300;
	font-weight:bold;
	letter-spacing:.1em;
	text-decoration:none;
	}
 
#dateformat a:hover {
	color: #F4FFE4;
	letter-spacing:.1em;
	}
 
/* Class Styles */
 
.bodyText {
	font:11px Arial, Helvetica, sans-serif;
	color:#666666;
	line-height:20px;
	margin-top:0px;
	}
 
.pageName{
	font: 18px Arial, Helvetica, sans-serif;
	color: #99CC66;
	line-height:26px;
	letter-spacing:.21em;
	}
 
.subHeader {
	font:bold 11px Arial, Helvetica, sans-serif;
	color: #993300;
	line-height:22px;
	letter-spacing:.2em;
	}
 
.quote {
	font: 20px Arial, Helvetica, sans-serif;
	color: #759DA1;
	line-height:30px;
	}
 
.smallText {
	font: 10px Arial, Helvetica, sans-serif;
	color: #666666;
	line-height: 22px;
	}
 
.navText {
	font: 11px Arial, Helvetica, sans-serif;
	color: #003366;
	line-height:16px;
	letter-spacing:.1em;
	text-decoration: none;
	}

Sauriez-vous me dire si je dois changer le css ou carrément créer un autre css pour IE 7 ?

Merci d'avance.

beegees

20/02/2009, 10h20
HiRoN

Salut,

Avoir l'ensemble du code (X)HTML & CSS pourrait aider à mieu cerner le problème... ;)

Citation:

Envoyé par HiRoN

Salut,

Avoir l'ensemble du code (X)HTML & CSS pourrait aider à mieu cerner le problème... ;)

Salut Hiron,

J'ai réussi à résoudre une partie du problème, les listes de sélection sont maintenant toutes à la même hauteur.

Par contre, quand je choisis un cours, les listes déroulantes ont un kilomètre de distance entre eux (pas avec firefox mais bien avec IE).

Voici le code où se trouve mes listes déroulantes :

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
<!--<tr> c'est une ligne (row) et td c'est une cellule-->
	<form name="frm_Listes_Deroulantes" action="" method="post">
	<table border=0 id="tableau_AJAX">
		<tr>
			<td> <?php
				//c'est ici que l'on va remplir la frame centrale du site
				include('Scripts/Afficher_Mnemonic_Par_Rapport_Liste_Deroulante.php');
				?>
			</td>
 
			<td>
				<?php	
				//c'est ici que l'on va remplir la frame centrale du site
				include('Scripts/Charger_Types_Cours_Liste_Deroulante.php');
				?>
			</td>
 
			<td>
				<?php	
				//c'est ici que l'on va remplir la frame centrale du site
				include('Scripts/Charger_Categories_Liste_Deroulante.php');				
				?>
 
 
			</td>
 
			<td>
 
			<div id="div_bouton"></div>
					<input type="submit" style="display:none"/>
 
			</td>
 
<td><input type="submit" name="imprimer" id="imprimer" value="Imprimer" onclick="Imprimer();"/></td><td><div id="div_cloturer"></div></td>			
 
<td><div id="div_cloturer"></div></td>
		</tr>
 
 
	</table>
 
	</form>
    <p>

le code de ma 2e liste (celle qui porte le numéro (2)) :

Code:

1
2
3
4
5
6
7
8
9
 
<!--la ligne ci-dessous est indispensable au cas oů on change manuellement la liste liste déroulante dans le programme-->
<select name="select_Nom_mnemonics" id="select_Nom_mnemonics"  onchange='fnctcours(this.value);';>
	<option value='-1'> (2) Choisissez un cours </option>
</select>
 
<!-- appel du code AJAX pour compléter la liste déroulante suivante ==> les types de cours -->
 
<script language="javascript" src="Ajax_Listes_Deroulantes_Generiques_Types.js"></script>

de la 3 :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
	<!--Quand je change manuellement la liste déroulante "Types", je dois lui passer le nom du cours-->
	<!--il faut prévoir deux situations :
		1) on change manuellement la liste déroulante, il faut donc mettre la fonction que l'on appelle et ce qu'on lui passe ici
		2) la liste déroulante ce change par rapport au changement de la liste précédente	-->
<select name="select_Nom_types" id="select_Nom_types" onchange="fnctcategories(document.getElementById('select_Nom_types').value);"> 	
		<option value="" selected="selected"><b>(3)</b> Choix d'un type</option>
	</select>
 
 
<script language="javascript" src="Ajax_Listes_Deroulantes_Generiques_Categories.js"></script>

Je mets les nouvel miniature pour bien voir le problème.

Merci d'avance pour l'aide.

beegees

23/02/2009, 14h07
Ethyde

Bonjour,

si tu pouvais ajouter les styles CSS qui vont avec ton formulaires cela serais bien pratique, le mieux serais de pouvoir voir la page :)