Comment éviter le mode de document Quirks ?

Version imprimable

14/08/2011, 18h29
noobyyy

Comment éviter le mode de document Quirks ?

bonjour à vous, je développe un siteweb en ce moment (pour pas changer)

lorsque que je regarde ma compatibilité avec les autres navigateurs j'ai des surprises avec quavec'IE !

IE9 par défaut active le mode quirks :
http://front1.monsterup.com/upload/1313339217352.jpg

cependant avec ce mode la j'ai pas mal d'erreurs !!

comment forcer ma page à éviter ce mode là et à prendre les normes IE9 qui m'affiche mon site correctement ?

Salut,

Il faut déclarer le type de document (DOCTYPE) pour indiquer au navigateur quelles sont les règles d'écritures qui sont respectées par le document.

Liste des DOCTYPE pour les documents (x)HTML (sans jeu de cadres)

HTML 4.01 Transitional
Code:

1 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="fr">
HTML 4.01 Strict
Code:

1 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr">
XHTML 1.0 Transitional
Code:

1 2 <!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" lang="fr">
XHTML 1.0 Strict
Code:

1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
HTML 5.0
Code:

1 2 <!DOCTYPE html> <html lang="fr">

merci pour la liste...

j'ai ceci :

Code:

1
2
<!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-fr" lang="fr-fr" dir="ltr" >

le problème persiste...

14/08/2011, 20h35
Eric2a

Tu as des caractères (autres que des espaces/tabulations et sauts de ligne) avant la déclaration du DOCTYPE ?
15/08/2011, 01h18
noobyyy

euh j'ai du code php pour des traitements, variables pour les paramètres

dans le head j'ai sa :
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

c'est comme s'il voulait pas me prendre le css3 :(
15/08/2011, 13h07
Eric2a
En supprimant la ligne...

Code:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

?

Si tu utilises CSS 3, il est préférable d'utiliser le DOCTYPE HTML5...
Code:

1 2 <!DOCTYPE html> <html lang="fr">
15/08/2011, 13h19
noobyyy

J'ai supprimé la ligne, j'ai changé le doctype mais rien ne change !!! 8O 8O

Je suis désespéré je ne sais plus où chercher ! :cry:
15/08/2011, 13h31
12monkeys

Bonjour

Et tu n'as pas plutôt une page en ligne qu'on puisse constater de visu ?
15/08/2011, 13h57
noobyyy

c'est un nouveau projet avec une protection htaccess :oops:

pour vous donner plus de précision c'est un thème sous Joomla 1.7

Voici une partie du code mais rien exceptionnelle...
http://img543.imageshack.us/img543/3576/code1d.jpg

edit :
http://data.imagup.com/11/1128077047.jpg

Même pas valide cette ligne sous html 5 :calim2:
15/08/2011, 14h35
12monkeys

Ca n'aide pas franchement :?

N'y aurait il pas un BOM qui trainerait au début de ton fichier ?
15/08/2011, 14h40
noobyyy

Mon index.php est encodé en UTF-8 (sans BOM)

Code:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

bon alors la je vais envoyer du lourd car je comprends plus rien :

code xhtml :

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
<!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" dir="ltr" lang="fr-FR" xml:lang="fr">
<head>
    <title>test</title>
    <link rel="stylesheet" href="test.css" type="text/css" media="screen" />
</head>
<body>
<table>
<!-- content -->
<tr>
	<td>
		<div id="contenu">
 
		<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
		</div>
	</td>
</tr>
<!-- /content -->
</table>
</body>
</html>

code css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
#contenu {
	border: 2px solid #41494A;
	background-color: blue;
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px; 
	-khtml-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);	
	width: 900px;
	padding: 10px  10px  10px  10px;
}

Résultats :

http://front1.monsterup.com/upload/1313424064390.jpg

http://front1.monsterup.com/upload/1313424064457.jpg

16/08/2011, 05h08
Atomya Rise

Citation:

Envoyé par noobyyy

bon alors la je vais envoyer du lourd car je comprends plus rien

Les version inférieur à IE9 ne supporte pas le border-radius
16/08/2011, 11h05
noobyyy

merci mais je suis déjà au courant de ceci, ce que je ne comprends pas c'est qu'au mode quirks il refuse de m'afficher du css3 avec le moteur IE9
16/08/2011, 11h08
Bovino

Citation:

Envoyé par noobyyy

ce que je ne comprends pas c'est qu'au mode quirks il refuse de m'afficher du css3 avec le moteur IE9

Ben précisément parce qu'en mode Quircks, ce n'est pas le moteur de rendu IE9 qui est utilisé mais celui d'IE5.5 :aie:
16/08/2011, 11h20
noobyyy

Merci Bovino, mais lors de l'installation d'IE9 (pas mal de personnes) les gens ne vont pas aller dans les paramètres pour mettre les normes IE9 comment forcer ceci :

Code:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

Ne fonctionne pas en quirks

je ferai une explication dans la FAQ lol
16/08/2011, 12h00
Atomya Rise

Citation:

Envoyé par noobyyy

Code:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

Ne fonctionne pas en quirks

C'est un peu normal tu ne trouve pas ?
Cette ligne empêche justement de faire passé le navigateur en mode quirk pas l'inverse

Par contre, j'avoue que pendant mes recherches, j'ai beaucoup aimé relire deux fois la même conversation, c'était rigolo ^^

Les bases pour éviter le mode quirk :
- un doctype correcte
- pas de code ou autre avant le doctype (même pas un espace)
- pour les anciennes version d'ie, éviter le prologue xml

Pour une compatibilité avec IE, le plus intéressant est de faire un css pour IE ;)

Un peu de lecture vis à vis de tout ceci :

http://esprit-creatif.blog.mongenie....idblogp=406297
16/08/2011, 13h06
noobyyy

Ok merci.

je met résolu. :ccool: