CSS non pris en compte par ie (AJAX)

Version imprimable

28/08/2006, 17h46
Wanty

CSS non pris en compte par ie (AJAX)

Bonjour,

J'ai un probleme avec une de mes page. J'ai une page document.php qui grace à l'objet xmlhttprequest charge une page : "view_memo.php" dans un div de la page "document.php".
Avec firefox, le CSS de la page à charger dans le div est bien pris en compte. Mais avec IE il n'affiche que le texte brut.

Je ne sais pas trop comment régler ce problème. J'ai besoin urgemment d'aide !

Merci d'avance ...
29/08/2006, 08h04
blueice

Un peu plus de détails se serait bien.
Si j'ai bien compris tu inclus une page dans le div d'une autre page, mais où déclares-tu ta feuille de style ?
29/08/2006, 09h20
Wanty

J'ai une feuille de style pour la page "document.php" qui va gérer l'aspect des div de cette page et une feuille de style dans la page "view_memo.php" et c'est cette dernière qui n'est pas pris en compte avec ie...
29/08/2006, 09h28
blueice

Citation:

une feuille de style dans la page "view_memo.php"

Ca veut dire quoi ? Tu déclares tes styles dans la meme page ?
As-tu regardé le code généré pour voir si les styles sont compris ?

Sinon il te suffit d'indiquer dans ta page principale, l'autre feuille de style.

Et bien j'ai une feuille de style pour la page appelante et une pour et sur la page appelé dans le div.
Je ne peux pas mettre la feuille de style de la page "view_memo.php" dans "document.php" car ce n'est pas toujours "view_memo.php" qui est appelé dans le div ça peut etre une autre page avec un autre style.

De plus, il existe une fonction sur le site qui permet d'envoyer cette page "view_memo.php" par mail. Elle doit donc avoir son propre style.

Le truc c'est que ça marche nickel avec Firefox et Opéra. Mais ie non ...

Viola ma page view_memo.php :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
		<title>Courrier électronique</title>
		<style media="screen" type="text/css">
			<!--
			.postit
			{
				border: 3px solid #EEE;
				background-color: #FFF;
				position: relative;
				padding: 1px;
				z-index: 1;
				margin: 10px;
			}
 
			.titre_memo
			{
				text-align: center;
				padding: 5px;
				text-decoration: none;
				color: #000;
				font-family: Arial;
				font-size: 16px;
				font-weight: bold;
				background: #f9f9f9 url(../images/bgsidebar.jpg) repeat-x bottom;
				border-top: 1px #B4B4B4 solid;
				border-bottom: 1px #B4B4B4 solid;
			}
 
			.objet_memo
			{
				text-align: left;
				padding: 5px;
				padding-left: 20px;
				text-decoration: none;
				color: #00368F;
				font-family: Georgia;
				font-size: 12px;
				font-weight: bold;
				background: #EFF5FF url(../images/note.gif) no-repeat top left;
 
			}
 
			.date_memo
			{
				position: relative;
				text-align: right;
				text-decoration: none;
				color: #00368F;
				font-family: Georgia;
				font-style: italic;
				font-size: 11px;
				font-weight: bold;
				background-color: #EFF5FF;
			}
 
			.contenu_memo
			{
				position: relative;
				text-align: justify;
				padding: 10px;
				text-decoration: none;
				color: #524d0c;
				font-family: Georgia;
				font-size: 11px;
				background-color: lightyellow;
				border: 1px lightyellow solid;
 
			}
 
			.observations
			{
				padding: 5px;
				text-decoration: none;
				color: #524d0c;
				font-family: Georgia;
				font-size: 11px;
				font-style: italic;
				background-color: lightyellow;
			}
			-->
		</style>
	</head>
 
	<body>
		<div class="titre_memo">Mémo</div>
		<div class="postit">
			<div class="objet_memo">Objet</div>
			<div class="date_memo">12/12/2006</div>
			<div class="contenu_memo">blah blah blah<br/><br/>		
				<span class="observations">Observations...</span>
			</div>
		</div>
	</body>
</html>

Je ne vais pas poster la page document.php qui est trop longue. Mais je peux vous dire que dans celle ci, ce trouve un css, un div et une fonction javascript permettant d'y afficher la page que je viens de poster.

J'espère avoir été plus clair. Merci pour ton aide, c'est cool ;)

29/08/2006, 10h32
speedev

Salut!

Utilises-tu la fonction setRefreshArea présente dans Ajax pour recharger ton div?

Non voila ma fonction :

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
 
/* 
Fonction permettant de charger une page dans un  div
*/
function getData(dataSource, divID)
{
	var objetXMLHttpRequest = false;
	if (window.XMLHttpRequest) {
		objetXMLHttpRequest = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		objetXMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}
 
	if(objetXMLHttpRequest) {
		var obj = document.getElementById(divID);
		objetXMLHttpRequest.open("GET", dataSource, true);
		objetXMLHttpRequest.onreadystatechange = function()
		{
			if (objetXMLHttpRequest.readyState == 4 && objetXMLHttpRequest.status == 200) {
				obj.innerHTML = objetXMLHttpRequest.responseText;
			}
		}
		objetXMLHttpRequest.send(null);
	}
}

[edit] C'est bon j'ai trouvé, il suffisait d'enlever le css de la balise HEAD et de la mettre dans body de ma page : "view_memo.php", il devait y avoir un conflit avec deux css dans 2 head différent je ne sais pas ...

29/08/2006, 12h19
speedev

Effectivement si tu as deux <head>... ;)