CSS non pris en compte par ie (AJAX)

**Wanty** · 28/08/2006, 18h46

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 ...

**blueice** · 29/08/2006, 09h04

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 ?

**Wanty** · 29/08/2006, 10h20

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...

**blueice** · 29/08/2006, 10h28

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.

**Wanty** · 29/08/2006, 10h59

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 :

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
 
<!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

**speedev** · 29/08/2006, 11h32

Salut!

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

**Wanty** · 29/08/2006, 11h51

Non voila ma fonction :

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
 
/* 
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 ...

**speedev** · 29/08/2006, 13h19

Effectivement si tu as deux <head>...

CSS non pris en compte par ie (AJAX)

CSS

Discussions similaires

Partager

Partager