positionnement Ie et FF

bonjour voila, sous internet explorer mon chat s'affiche bien avec le bas de page a la bonne place.

mais quand je l'ouvre avec FIREfox le bas de page se retrouve en haut a droite :s .

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
<?php
 
        session_start();
        header('content-type:text/html;charset=iso-8859-1');
 
        if(!isset($_SESSION['login']))
        {
 
                exit;
        }
?>
<!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" lang="fr">
<head>
	<title>Discutez en direct sur liens sexy</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="all" />
	<script type="text/javascript" src="script.js"></script>
</head>
<body>	<div id="logo_haut1"><p>&nbsp;</p></div>
		<div id="logo_haut"><p>&nbsp;</p></div>
	<p id="chat_haut">Bienvenue sur le chat :)</p>
	<div id="chat_centrage">
		<label id="chat_html"></label>
		<div id="chat_connectes">
			<p>Connectés au chat :</p><hr />
			<label id="connectes"></label>
		</div>
		<div id="chat_bas">
			<form action="javascript:envoi_message()">
				<p class="pm"><input type="text" name="message" id="message" size="82" /><input type="submit" value="Ok" class="gris" /></p>
			</form>
			<p id="smileys"><a href="javascript:sm(':-)')"><img src="smileys/smile1.gif" alt="" /></a><a href="javascript:sm(':-))')"><img src="smileys/smile2.gif" alt="" /></a><a href="javascript:sm(':-(')"><img src="smileys/smile10.gif" alt="" /></a><a href="javascript:sm('^^')"><img src="smileys/smile30.gif" alt="" /></a><a href="javascript:sm(':P')"><img src="smileys/smile5.gif" alt="" /></a><a href="javascript:sm('::|')"><img src="smileys/smile6.gif" alt="" /></a><a href="javascript:sm('^p')"><img src="smileys/smile21.gif" alt="" /></a><a href="javascript:sm(':[]:')"><img src="smileys/smile32.gif" alt="" /></a><a href="javascript:sm(':coeur:')"><img src="smileys/smile33.gif" alt="" /></a><a href="javascript:sm(':lol:')"><img src="smileys/smile24.gif" alt="" /></a><a href="javascript:sm(':mouais:')"><img src="smileys/smile34.gif" alt="" /></a><a href="javascript:sm(':etonne:')"><img src="smileys/smile15.gif" alt="" /></a><a href="javascript:sm(':enerve:')"><img src="smileys/smile13.gif" alt="" /></a><a href="javascript:sm(':ouais:')"><img src="smileys/smile20.gif" alt="" /></a>
			<form id="form_statut" action="#">	</p>
				<select id="s_statut" onchange="javascript:statut()">
					<option value="0">En ligne</option>
					<option value="1">Occupé</option>
					<option value="2">Parti manger</option>
					<option value="3">Absent</option>
					<option value="4">Au t&eacute;l&eacute;phone</option>
					<option value="5">De retour bient&ocirc;t</option>
				</select>
			</form>
		</div>
	</div>
 
	<script type="text/javascript">
                setTimeout(lire_messages,2000);
                setTimeout(connectes,2000);
        </script>
<div><p>&nbsp;</p></div>
	<div class="basdepage"><p>TSTTFTFTFTFTFTFTF</p></div>
</body>
</html>

Et voici ma feuille de style

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
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
body,#chat_haut{
 text-align:center;
 background-color:#ffffff;
}
#corp{
background-color:#C6E7B8;
}
#logo_haut{
margin-left:auto;
margin-right:auto;
text-align:center;
background-image:url(img/1.jpg);
background-repeat:no-repeat;
width:704px; 
height:117px;
padding:0;
}
 
#logo_haut1{
margin-left:auto;
margin-right:auto;
background-image:url(img/2.jpg);
background-repeat:no-repeat;
width:704px; 
height:183px;
padding:0;
 
}
.basdepage{
margin-left:auto;
margin-right:auto;
width:704px; 
height:50px;
background-color:#FFFFFF;
background-image:url(img/3.gif);
background-repeat:no-repeat;
}
#chat_haut{
 height:35px;
 line-height:35px;
 color:#526599;
 background-color:#C6E7B8;
}
#pas_enregistre{
 display:none;
}
#haut,#form{
 text-align:justify;
}
#haut,#form,#chat_haut{
 margin-top:5px;
 border:1px dashed #C0C0C0;
}
.connec,.voice,.admin,.mode{
 cursor:help;
}
#haut,#form,#chat_haut,#chat_centrage{
 width:704px;
 margin-left:auto;
 margin-right:auto;
}
#chat_html,#chat_connectes,#chat_bas{
 float:left;
}
#chat_bas{
vertical-align:bottom;
 border:1px dashed #C0C0C0;
 }
#chat_html{
 border:1px dashed #C0C0C0;
 width:570px;
 height:430px;
 background-color:#C6E7B8;
}
#chat_connectes{
 width:124px;
 margin-left:5px;
 height:430px;
 background-color:#C6E7B8;
}
#chat_html,#connectes{
 text-align:left;
 overflow:auto;
 background-color:#C6E7B8;
}
#connectes{
 width:119px;
 margin-left:5px;
 height:380px;
 background-color:#C6E7B8;
}
#chat_bas{
 height:70px;
 width:704px;
 text-align:left;
 background-color:#C6E7B8;
}
#form_statut{
 position:relative;
 left:370px;
 top:-25px;
}
#smileys{
 margin:5px;
 background-color:#C6E7B8;
}
#smileys img{
 margin-left:5px;
}
p,a:link,a:hover,a:visited{
 font-family:Verdana,Arial,Helvetica;
 font-size:7.5pt;
 color:#000000;
}
.marron{
 color:#AA5500;
}
.connec,.p0{
 color:#0000AA;
}
.voice,.p1{
 color:#C0C0C0;
}
.rouge,.p3,.admin,.private{
 color:#CC0000;
}
.p0,.p1,.p3,.connec,.voice,.mode,.admin,#chat_haut{
 font-weight:bold;
}
.p2{
 color:#339966;
}
.chat,.mode{
 color:#339966;
}
.gris{
 border:1px solid #C0C0C0;
 background-color:#F0F0F0;
 height:21px;
 vertical-align:middle;
 margin-left:2px;
}
hr,img{
 border:0;
}
hr{
 height:1px;
 border-top:1px dashed #C0C0C0;
}
label{
 display:block;
 font-weight:bold;
}
form{
 margin-left:10px;
}
p,body{
 margin:0;
}
p{
 line-height:20px;
}
.pm{
 margin-top:5px;
}
form{
 margin-top:0;
 margin-bottom:0;
}

j'espere que quelqu'un va savoir m'aider..

personne pour m'aider?

merci pour tout votre soutien les mecs lol

Les incompatibilités entre IE et FF c'est durement résolvable...

oui lol mais il doit quand meme exister un remède j'en suis sur ;)

Tu pourrai creer 2 css ( uen pour IE , une pour FF ). Ensuite detecter quel navigateur utilise l utilisateur et en fonction de ca, inclure la css adequat.

par exple:
Code:

1 2 3 4 5 <?php if($browser == 'IE')echo '<link rel="stylesheet" href="styleIE.css" type="text/css" media="all" />' ; elseif($browser == 'FF')echo '<link rel="stylesheet" href="styleFF.css" type="text/css" media="all" />' ; ?>

tu as essayé d'isoler le probleme en mettant des bordures ou des couleurs de fond a tes blocs?

Tu peux nous filer l'url parce que la les noms que tu files a tes blocs sont pas très explicites et perso je vois pas trop a quoi ressemble ton site...

Les problèmes viennent souvent de ce que l'on appelle le "modèle en boite de microsoft". IE gere de facon differente les tailles des blocs et forcément ca merde ;)

Le truc est donc de faire son site sous firefox et ensuite de faireen sorte que ca fonctionne sous IE (sans utiliser les attributs gérer different ou bien en utilisant des hacks..)

j'ai trouvé la cause du probleme, je devais juste ajouté ma class au float

je vous remercie néanmoins d'avoir essayé de m'aidé romain et kilanepa ;)
merci a vous