Javascript, CSS et Internet Explorer

**Bestiol** · 28/07/2006, 01h00

Bonjour à tous !

Je suis en train de faire une page web avec un peu d'ajax (c'est pas vraiment de l'ajax pour la partie qui me pose problème étant donné que j'utilise pas du xml mais peu importe...) derrière, et je suis confronté à un problème dont je n'ai trouvé aucune solution après beaucoup de recherches !

Je m'en remets donc à vous

Le problème est simple. Dans ma page j'ai un div qui contiendra une liste d'intitulés de messages :

Code :

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

<div id="liste-messages"></div>

Dans le onload de la page j'appelle une fonction javascript qui va se charger de créer le xmlHttpRequest. Avec celui-ci j'appelle mon script PHP qui me renvoie directement l'HTML que je récupère avec responseText et que je place dans le innerHTML du div déjà cité :

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
  if(_xmlHttp) 
  {
    //appel à l'url distante
    _xmlHttp.open("GET", "./getmessages.php?debut=" + debut + "&nombre=" + nombre, true);
 
    _xmlHttp.onreadystatechange = function() 
    {
      if(_xmlHttp.readyState == 4 && _xmlHttp.responseText) 
      {
		document.getElementById("liste-messages").innerHTML = _xmlHttp.responseText;
      }
    };
    // envoi de la requête
    _xmlHttp.send(null)
  }

Bon jusque là je n'ai aucun problème ! Le HTML est bien ajouté dans mon div et il s'affiche sur ma page.

Le problème c'est que j'ai défini des styles CSS dans une feuille de style externe qui sont censés s'appliquer aux div que mon script PHP me renvoie, et sous IE ces styles ne sont pas appliqués au contenu que j'ajoute grâce au javascript !

(aucun problème aec Firefox)

J'ai essayé de bidouiller en recopiant les styles dans les données renvoyées par le script PHP, au dessus des div, mais ça ne marche qu'à moitié et franchement ça me plait pas trop de faire ça....

Est-ce que quelqu'un a déjà eu ce problème ? Ou bien ne l'a pas mais connaît une solution ?

Si vous avez besoin de plus de détails n'hésitez pas à me demander

**SpaceFrog** · 28/07/2006, 08h33

Code :

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

<div id="liste_messages"></div>

???

**Bestiol** · 28/07/2006, 09h14

Salut Spafy

Merci pour ta réponse, mais malheureusement ça ne change rien

(et pour tout dire ça m'aurait bien ****** que ça soit ça

)

**SpaceFrog** · 28/07/2006, 09h34

??? c'est curieux ton souci car j'utilise cette technique et le css s'applique bine ...
tu n'as pas un souci de caractères interdits dans le responsetexte ?
ton respnse texte est il en forlat UTF-8 ?

viens sur le chat si tu veux qu'on en parle et que je te montre l'exemple en ligne que j'ai ...

**Bestiol** · 28/07/2006, 09h38

en header dans le retour de mon script j'ai mis :

Code :

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

header("Content-Type: text/html; charset=ISO-8859-1");

Faut que ce soit en utf-8 ??

J'arrive sur le chat

**Bestiol** · 28/07/2006, 11h04

Bon le problème ne se règle toujours pas

Voici un peu plus de code (à la demande de spacefrog):

Ma page HTML :

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
<html>
 
<head>
...
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
	<script src="livre-or.js" type="text/javascript"></script>
	<link rel="StyleSheet" type="text/css" href="./livre-or.css"/>
...
</head>
 
<body onload="ChargerMessages(0, 7);">
 
...
	<div id="liste-messages">
 
	</div>
 
 
</body>
</html>

La feuille de style :

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
div#liste-messages {
	position: absolute;
	left: 195px;
	top: 130px;
	width: 250px;
	height: 350px;
}
 
div.table-message {
	margin-top: 10px;
 
	background: #fffcde;
	border: 1px solid #4b1810;
	padding: 2px;
	opacity: 0.7;
	cursor: pointer;
}
 
div.table-message:hover {
	opacity: 1;
}
 
div.message-infos {
	font-size: 8pt;
}
 
img#img-lire {
	position: relative;
	left: 55px;
	top: -1px;
	cursor: pointer;
}

Le script PHP :

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
<?	header("Content-Type: text/html; charset=utf-8");
	include("bdd.php");
 
	ConnectBDD();
 
//Récupération des données en BDD
 
	while($message = mysql_fetch_assoc($req))
	{
?>
 
		<div class='table-message'>
 
			<div class='message-header' onclick='LectureMessage(<?= $message['id']?>)'>
				<?= substr($message['titre'], 0, 25)?>
			</div>
			<div class='message-infos'>
				Le <?= $message['date'] ?> &agrave <?= $message['heure'] ?>
				<img id='img-lire' src='./images/lire.gif' onclick='LectureMessage(<?= $message['id']?>)'/>
			</div>
		</div>
<?
	}
?>
		<table style='width: 100%'>
			<tr style='width: 100%'>
				<td style='text-align: left;'>
					<?if ($debut > 0) {?>  <span class='petit-texte'><a href='#' onclick='ChargerMessages(<?= $debut - $nombre?>, <?= $nombre?>)'>&lt;&lt; Pr&eacute;c&eacute;dent</a></span> <?}?>
				</td>
				<td style='text-align: right;'>
					<?if ($count > $debut + $nombre) {?>   <span class='petit-texte'><a href='#' onclick='ChargerMessages(<?= $debut + $nombre?>, <?= $nombre?>)'>Suivant &gt;&gt;</a></span>  <?}?>
				</td>
			</tr>
		</table>
 
<?	
	//print "]]></messages>";
	DeconnectBDD();
?>

Et pour le JS qui appelle ce script il suffit de regarder dans le premier message...

Est-ce que j'ai fait une grosse boulette ??

Javascript, CSS et Internet Explorer

JavaScript

Vue hybride

Discussions similaires

Partager

Partager