28172 sujets

CSS et mise en forme, CSS3

[Résolu] Help - IE9 sur un problème media queries (pb en local)

Bonjour à toute la communauté,

Après avoir lu les articles très interessants sur les media queries et les versions pour mobile des sites, j'ai essayé un petit bout de code tout simple.

Alors cela fonctionne bien sur Firefox, mais sur IE9 cela ne fonctionne pas du tout, mon affichage reste identique quelque soit la largeur d'écran... je ne comprend pas pourquoi, je me tourne donc vers vous pour comprendre où est mon problème (et apprendre du coup pour ne pas refaire la même erreur).

Voici le code :

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8"> 
		<style>
			.bloc {
				float : left;
				width : 48%;
				margin-left: 1%;
				margin-right: 1%;
				background-color : gold;
			}
			
			hr {
				clear : both;
			}
			
			@media (max-width: 768px) {
				.bloc {
					float : none;
					width : 100%;
					margin-top : 1em;
					margin-left : 0;
					margin-right : 0;
				}
			}
		</style>
	</head>
	
	<body>
		<div class="contenu">
			<div class="bloc">
				TEST
			</div>
			<div class="bloc">
				TEST
			</div>
			<hr />
		</div>
	</body>
</html>

Modifié par jpacces (20 Dec 2011 - 09:02)
Sale IE, toujours aussi nul ! Smiley fache Un conseil, prend un autre navigateur. Smiley cligne
Pour répondre à ta question, je pense que tu devrais mettre un "id" à la place d'un "class" pour ton div. C'est la méthode que j'utilise, elle marche. @+
Bonjour,

Merci pour ces premières réponses.

Pour le div, je ne peux pas mettre un id, car j'utilise plusieurs fois les mêmes attributs (là j'ai simplifié à l'extrême avec juste deux div de class bloc), et comme un id est unique je devrais créer autant de id dans le css que de bloc existant...

Pour la meta, oui j'ai essayé aussi avec, et même résultat : cela ne fonctionne pas sous IE9 (navigateur que je déteste parfois comme en ce moment quand il en fait qu'à sa tête)

J'ai pourtant bien suivi les tutos sur le site alsacreations, les exemples proposés fonctionnent bien, mais mon code (pourtant bête et simple) ne fonctionne pas... Smiley biggol c'est une prise de tête, cela doit pourtant être une simple conn#### pour que cela fonctionne Smiley murf
Alors, quand on a un problème, le but est tout d'abord d'en trouver la source. Dans ton cas, il y a, à prime abord, deux problèmes probables :

0- Vide ton cache (tout bête, mais parfois hein)
1- Tes règles medias queries ne sont pas appliqués
2- Ta règle CSS n'est pas appliqué.

Ne reste plus qu'à trouver lequel ce peut-être.

Pour le premier, ajoute cette ligne dans ta media query:


@media (ta règle) {
    body {
        background-color: red !important;
    }
}


N'hésite pas à simplifier ton code si nécessaire. (et assure toi que rien ne supplante cette règle au niveau du poids des sélecteurs.)

Si <body> ne devient pas rouge, alors ta media query n'est pas appliqué. Si ça fonctionne, alors ce doit être un problème CSS.

Si tel est le cas, utilise firebug pour vérifier quelles règles sont appliqués à ton élément .bloc et assure toi que le poids de ta règle dans la media queries est égale (si elle est déclarée après) ou supérieur (si elle est déclarée avant).

Bonne chance !
Je n'ai aucune idée de si ça peut jouer mais si tu précises "screen" dans ta règle, ça donne quoi ?

Par exemple :
@media screen and (max-width: 768px)
Bonjour,

Alors j'ai ajouté la balise <meta name="viewport"...> sans succès.

J'ai essayé le coup du changement de couleur sur le body (je n'y avais pas pensé), alors sur Firefox je vire bien au rouge (mais lui fonctionnait déjà), sur IE cela reste inchangé.

J'ai donc regardé sur Firebug ce qui était appliqué et voilà le résultat :

body {
    background-color: red !important;
}



.bloc {
    float: none;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
    width: 100%;
}

.bloc {
    background-color: gold;
    ---float: left;
    ---margin-left: 1%;
    ---margin-right: auto;
    ---width: 48%;
}

(les --- indiquent que la règle est barrée, donc pas appliquée normalement)

Et pour rappel le code utilisé pour le test :

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8"> 
		<meta name="viewport" content="width=device-width">
		
		<style>
			.bloc {
				float : left;
				width : 48%;
				margin-left: 1%;
				margin-right: auto;
				background-color : gold;
			}
			
			hr {
				clear : both;
			}
			
			@media (max-width: 768px) {
				body {
					background-color: red !important;
				}
				
				.bloc {
					float : none;
					width : 100%;
					margin-top : 1em;
					margin-left : 0;
					margin-right : 0;
				}
			}
		</style>
	</head>
	
	<body>
		<div class="contenu">
			<div class="bloc">
				TEST
			</div>
			<div class="bloc">
				TEST
			</div>
			<hr />
		</div>
	</body>
</html>


Je ne comprend pas trop pourquoi il ne veut pas... j'ai même essayé le code ci-dessous sans succès, on ne peut pas plus simple là Smiley fache 

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8"> 
		<meta name="viewport" content="width=device-width">
		
		<style>
			@media (max-width: 768px) {
				body {
					background-color: red !important;
				}
			}
		</style>
	</head>
	
	<body>
		TEST
	</body>
</html>


J'oubliais un truc, quand je vais sur alsacreations.com ou goetter.fr, je n'ai pas de problème, les media queries s'appliquent bien avec mon IE9 (ce qui impliquerait qu'il soit capable de les gérer Smiley biggol )
Modifié par jpacces (19 Dec 2011 - 10:13)
Essaie de mettre ton CSS dans un fichier externe.

Si rien n'y fait, pourrais-tu fournir un exemple en ligne ?
Ok pour la mise en fichier externe...

Je viens de faire un test en mettant en ligne cela fonctionne, et cela fonctionne aussi si je laisse le css dans le html... à ne rien y comprendre Smiley eek

L'essentiel étant que cela fonctionne, je pourrais tester en local sur FF tout en sachant que une fois en ligne cela fonctionne sur IE.

Merci. Smiley smile
Tu es sûr que IE n'était pas en mode compatibilité sur ton local ? (au lieu du mode standards)
Modifié par Kaelig (22 Dec 2011 - 18:15)
Sujet clos
Aller à