Probleme de compatipilité FF- IE

**Lexion71** · 20/11/2007, 18h52

Bonjour à tous !

Voilà j'ai un problème, sur mon site j'ai un block "contenu" qui est à côté de mon block "menu" tous deux sont réunis dans un block "corps".
Sous FireFox lorsque j'écris dans le block "contenu" tout marche, mais sous IE ça me met le block en bas de mon site ( apres les menus mais dans le bon alignement). J'ai bien entendu essayé en mettant le div "contenu" avant le block "menu" mais le problème et que lorsque j'écris dans le block "contenu" mes menus descendent donc ça ne va pas.
Donc si quelqu'un a une solution je suis preneur

Voici les codes:

Html:

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
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
<!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>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>Agri-Web Bêta</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
 
  </head>
  <body>
 
 
 
  <div id="en_tete">    <!-- L'en-tête -->
  </div>
 
 
 <div id="corps">       <!-- Le corps -->
 
 <div id="menus">       <!-- Les menus -->
 
 <div class="menu_accueil">
 
<div class="titre_accueil">
</div>
 
<ol>
<li><a href="index.html">Présentation</a></li>
<li><a href="index.html">Messagerie</a></li>
<li><a href="index.html">Forum</a></li>
<li><a href="index.html">Tchat</a></li>
</ol>
</div>
 
<div class="menu_id">
 
<div class="titre_id">
</div>
 
<ol><form method="post" action="traitement.php">
<p><label for="nom">Pseudo</label><br />
<input type="text" name="pseudo" id="pseudo" tabindex="10" /><br />
<label for="prenom">Mot de Passe</label><br />
<input type="password" name="pass" id="pass" tabindex="20" /><br />
</p>
<p><input type="image" src="bouton_connex.png" alt="soumettre la requête" /></p>
</form></ol>
<ol>
<li><a href="index.html"><strong>Inscription</strong></a></li>
</ol>
</div>
 
 
<div class="menu_animaux">
 
<div class="titre_animaux">
</div>
 
<ol>
<li><a href="index.html">Bovins</a></li>
<li><a href="index.html">Porcins</a></li>
<li><a href="index.html">Ovins</a></li>
<li><a href="index.html">Caprins</a></li>
<li><a href="index.html">Lapins</a></li>
<li><a href="index.html">Volailles</a></li>
<li><a href="index.html">Oies</a></li>
<li><a href="index.html">Canard</a></li>
<li><a href="index.html">Autres</a></li>
</ol>
</div>
 
<div class="menu_materiel">
 
<div class="titre_materiel">
</div>
 
<ol>
<li><a href="index.html">Le Matériel</a></li>
<li><a href="index.html">Nouveautés</a></li>
<li><a href="index.html">Collection</a></li>
</ol>
</div>
 
 
<div class="menu_cultures">
<div class="titre_cultures">
</div>
 
<ol>
<li><a href="index.html">Les Cultures</a></li>
<li><a href="index.html">Moissons</a></li>
</ol>
</div>
</div>
 
 
 
<div id="contenu">
 
<p>Mon texte</p>
<p>Mon texte</p>
<p>Mon texte</p>
</div>
 
 
<div id="pied_de_page">
 
<p>- <a href="index.html">Nous Contacter</a> - <a href="index.html">Informations légales</a> - <a href="index.html">L'Équipe</a> - <a href "index.html">Partenaires</a> -</p>
Copyright © Agri-Web 2007. Tous droits réservés.
</div>
 
 
</div>
</body>
</html>

CSS:

Code css :

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
body
{
    width: 800px;
        height:auto;
        margin:auto;
        background-image: url("fond.png");
        font-family: arial ;
        font-size: 12px;
}
 
#en_tete
{
        margin-top:-8px;
        width: 800px;
        height: 100px;
        background-image: url("en_tete1.png");
        background-repeat: no-repeat;
        margin-bottom: 10px;
}
 
#corps
{
        margin-top: 150px;
        margin-bottom: 20px;
        padding: 20px; 
        padding-top:0px;
        margin:center;
        width: 800px;
        height:auto;
        background-image: url("corps_1.png");
        background-repeat: repeat; 
    border: 1px solid black;
}
 
#menus
{
        width:170px;
        float:left;
}
 
a:visited /* Quand le visiteur a déjà vu la page concernée */
{
    text-decoration: none;
}
 
a:hover /* Quand le visiteur pointe sur le lien */
{
    text-decoration: none;
    color:grey;
}
 
a /* Lien normal */
{
    text-decoration: none;
    color: black;
    font-style: normal;
}
 
.titre_accueil
{
        margin-top:20px;
        margin-left:25px;
        margin-bottom:-10px;
        width: 170px;
        height: 30px;
        background-image: url("m_accueil.png");
}
.menu_accueil
{
        margin-bottom:25px;
        margin-top:10px;
        margin-left: -40px;
        list-style-image: url("puce.png");
}
 
.titre_id
{
        margin-bottom:-10px;
        margin-top:20px;
        margin-left:25px;
        width: 170px;
        height: 30px;
        background-image: url("m_connexion.png");
}
.menu_id
{
        margin-bottom:25px;
        margin-top:-10px;
        margin-left: -40px;
        list-style-image: url("puce.png");
 
 
}
 
.titre_animaux
{
        margin-bottom:-10px;
        margin-top:20px;
        margin-left: 25px;
        width: 170px;
        height: 30px;
        background-image: url("m_animaux.png");
}
 
.menu_animaux
{
        margin-bottom:25px;
        margin-left: -40px;
        margin-top:-10px;
        list-style-image: url("puce.png");
}
 
.titre_materiel
{
        margin-bottom:-10px;
        margin-top:20px;
        margin-left:25px;
        width: 170px;
        height: 30px;
        background-image: url("m_materiel.png");
}
 
.menu_materiel
{
        margin-bottom:25px;
        margin-top:-10px;
        margin-left: -40px;
        list-style-image: url("puce.png");
}
 
.titre_cultures
{
        margin-bottom:-10px;
        margin-top:20px;
        margin-left:25px;
        width: 170px;
        height: 30px;
        background-image: url("m_cultures.png");
}
 
.menu_cultures
{
        margin-bottom:25px;
        margin-top:-10px;
        margin-left: -40px;
        list-style-image: url("puce.png");
}
 
 
#pied_de_page
{
        margin:auto;
        width:500px;
        height:30px;
}
 
#pied_de_page a:visited /* Quand le visiteur a déjà vu la page concernée */
{
        text-decoration: underline;
}
 
#pied_de_page a:hover /* Quand le visiteur pointe sur le lien */
{
        text-decoration: underline;
        color : grey;
}
 
#pied_de_page a /* Lien normal */
{
        text-decoration: underline;
        color: black;
        font-style: normal;
}
 
#contenu
{
        float:top;
        margin-top:0px;
        width:610px;
        margin-left: 185px;
        padding: 5px;
}
 
#contenu a:visited /* Quand le visiteur a déjà vu la page concernée */
{
        text-decoration: none;
}
 
#contenu a:hover /* Quand le visiteur pointe sur le lien */
{
        text-decoration:none;
        color: green;
}
 
#contenu a /* Lien normal */
{
        text-decoration:underline;
        color : grey;
        font-style:normal;
}

Merci d'avance

**Bisûnûrs** · 20/11/2007, 19h03

float:top ? float ne prend pas cette valeur ... Mets-y left à la place et enlève le margin-left.

**Lexion71** · 20/11/2007, 19h09

Merci beaucoup, maintenant ca marche mieux sur IE que FF, j'ai un petit problème sur FF, l'image du corps ne s'allonge plus suivant la longueur du texte qu'il y'a. Quelqu'un a une solution?