Problème d'interprètation CSS

**AndroChristophe** · 27/01/2012, 10h38

Bonjour,
Je ne sais pas si je poste mon problème dans la bonne partie.

Voici mon problème
J'ai une application serveur qui génère à la volée des pages HTML, principalement pour des mobiles (Android, iPhone, Windows Phone, BlackBerry).
Mon application marche bien pour tous les navigateur, sauf pour internet explorer mobile du Windows Phone. Je reçois bien la demande de la feuille de css mais le navigateur n'interprète pas les styles.

Voici ma feuille 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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width">
		<link rel="stylesheet" href="smartphone.css" type="text/css" />
		<link rel="stylesheet" media="all" href="style1.css" type="text/css" />
		<!--[if lt IEMobile 9]><link rel="stylesheet" href="style1.css" media="screen"><![endif]-->
		<title>Test Windows Phone</title>
 
	</head>
	<body>
		<div id="page">
			<div id="52" class="block">
				<h1 class="title">Mon Titre</h1>
				<p class="text"><a href="www.google.fr" >ICI LIEN</a></p>
				<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue,</p>
 
			</div>
		</div>
	</body>
</html>

Au niveau des balises link j'ai trafiquer l'attribut média, les instructions conditionnelles. Ne vous étonnez pas s'il n'y a pas trop de cohérences dans les balises link ^^.

Mon CSS est vraiment pas compliqué :

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
#page {
	background-color: #FFB587;
}
 
.element {
	padding-left: 5px;
	padding-right: 5px;
}
 
.title {
	font-family: "Verdana";
	font-size: x-large;
	padding-left: 10px;
	color: #FF0000;
}
 
.description {
	font-family: "Times New Roman";
	font-size: medium;
}
 
.text {
	font-family: "Times New Roman";
	font-size: medium;
}
 
.image {
	text-align: center;
}

Si je mets le style directement dans les balises

Code :

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

<h1 class="title" style="color:#0000FF">

, là il n'y a pas de problèmes, la couleur de mes titres change bien.

Je ne vois pas d'où le problème peut venir...

Si vous avez une solution, merci de m'en faire part.
Merci d'avance et bon week-end pour ceux qui finissent tôt.

**Rachel** · 27/01/2012, 16h24

bonsoir

je te propose cette balise à insérer dans le HEAD :

Code html :

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

<link rel="stylesheet" type="text/css" media="handheld" href="style1.css" />

testé sous windows mobile 6.5 et ie6 mobile, donc ça devrait fonctionner pour toi

**AndroChristophe** · 27/01/2012, 18h05

Bonsoir,
Merci pour ta réponse, mais malheureusement pour moi ça ne fonctionne pas. Je ne sais pas du tout pourquoi je n'arrive pas à obtenir la mise en page du css via les fichiers.
J'ai cependant trouvé une alternative qui me convient pour le moment. Lorsque je génère mon fichier HTML, au lieu de mettre les balises link avec le nom de la feuille de style. J'ouvre et lis le fichier directement et insère son contenu dans une balise <style> dans mon entête.
Allez savoir pourquoi ça marche comme ça et pas autrement...

Enfin si vous avez d'autres propositions, je suis disposé à tout essayer pour rendre mon code plus joli.

Problème d'interprètation CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager