problème de version de IE et FF

Version imprimable

20/12/2008, 10h48
faamugol

problème de version de IE et FF

Bonjour,

J'ai developpé tout mon site Internet explorer 6.
J'ai essyé de voir le même site en internet explorer 7. A ma grande surprise, toute la forme est depalcé. Le menu de navigation complement deformé.

J'utilise des DIV pour les differentes sections du site.

Comment faut il rendre le site independant des versions. En plus en FireFox, j'ai aussi un site complement deformé.

Merci de votre aide,
20/12/2008, 18h46
Deallyra

Bonsoir,

Le mieux est de coder directement sur Firefox (plus stable) et d'utiliser des modules permettant d'avoir des aperçus des autres navigateurs (comme IEtab).

Le choix d'un doctype permet d'avoir un effet commun aux divers navigateurs.

Pour obtenir un document propre et valide W3C, je te conseille de le faire ne mode "strict".
Ton code sera ainsi propre et correctement interprété.

Maintenant, si ma réponse ne te convient pas, montres nous ce qui ne va pas via des screenshoots ainsi que du code.

Merci pour la réponse,

Avec le code suivant, je n'arrive pas à potionner mon div Pied à la fin de la page dans IE7 et FF.
En plus la couleur de fond de la div conteneur n'apparait pas.

quelle difference y il entre MARGIN-LEFT et LEFT tout simplement ?

Merci d'avance,

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
<!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>
<HEAD>
<TITLE> websote </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
 
<link rel="stylesheet" type="text/css" href="menu_css.css" />
 
</HEAD>
 
<BODY>
<DIV ID="conteneur">
 
<DIV ID="header"> entete site
</DIV>
 
<DIV ID="gauche"> gauche site (menu de naviga)
</DIV>
 
<DIV ID="centre"> centre page 
</DIV>
 
<DIV ID="droite">droite site
</DIV>
 
<DIV ID="pied"> pied de site
</DIV>
 
</DIV>
 
</BODY>
</HTML>

la page menu_css.css

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
BODY
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 13px;
BACKGROUND-IMAGE: url(back.png);
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
BACKGROUND-REPEAT: repeat-x;
FONT-FAMILY: Verdana;
BACKGROUND-COLOR: #B2B2B2;
}
 
#conteneur
{
MARGIN: 2px auto 0px;
WIDTH: 860px;
POSITION: relative;
BACKGROUND-COLOR: #B2B2B2; 
}
 
#header
{
HEIGHT: 150px;
WIDTH: 887px;
MARGIN-TOP: 0px;
MARGIN-LEFT: 1px;
BACKGROUND-COLOR: #dddddd;
POSITION: absolute;
}
 
#menuaccueil
{
MARGIN-LEFT: 0px;
WIDTH: 887px;
MARGIN-TOP: 160px;
height:20px;
BACKGROUND-COLOR: #FF9934;
POSITION: absolute;
}
 
#centre
{ MARGIN-LEFT: 150px;
MARGIN-RIGHT: 150px;
WIDTH: 560px;
MARGIN-TOP: 185px;
MARGIN-BOTTOM: 5px;
BACKGROUND-COLOR: #fffbbb;
POSITION: absolute;
}
#gauche
{ 
MARGIN-TOP: 185px;
MARGIN-BOTTOM: 5px;
WIDTH: 140px;
HEIGHT: 140px;
MARGIN-LEFT: 2px;
BACKGROUND-COLOR: #ffffff;
POSITION: absolute;
}
 
#droite
{
MARGIN-LEFT:720px;
MARGIN-TOP: 185px;
MARGIN-BOTTOM: 5px;
HEIGHT: 250px;
WIDTH: 160px;
BACKGROUND-COLOR: #ffffff;
POSITION: absolute;
}
 
#pied
{
MARGIN-BOTTOM: 0px;
HEIGHT: 20px;
WIDTH: 860px;
BACKGROUND-COLOR: #FF9933;
MARGIN-LEFT:0px;
POSITION: absolute;
}

Bonjour,

1) Tu déclare un DTD strict, tous tes tag/attribut doivent être en minuscule;
2) Abus de positionnement absolute sans aucun intérêt;
3) Ton header à une largeur plus grande que son conteneur;
4) Ton code CSS est loin d'être propre;

Si je me permet de corriger un peu de ton code :

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
 
BODY
{
FONT-SIZE: 13px;
BACKGROUND: #B2B2B2 url(back.png) repeat-x;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING: 0px;
FONT-FAMILY: Verdana;
}
 
#conteneur
{
MARGIN: 2px auto 0px;
WIDTH: 887px;
POSITION: relative;
BACKGROUND-COLOR: #B2B2B2;
}
 
#header
{
HEIGHT: 150px;
WIDTH: 887px;
MARGIN-TOP: 0px;
MARGIN-LEFT: 1px;
BACKGROUND: #dddddd;
}
 
#menuaccueil
{
WIDTH: 887px;
height:20px;
BACKGROUND: #FF9934;
position:absolute;
}
 
#centre
{ 
WIDTH: 560px;
MARGIN-BOTTOM: 5px;
BACKGROUND: #fffbbb;
float:left;
}
#gauche
{
MARGIN-BOTTOM: 5px;
WIDTH: 140px;
HEIGHT: 140px;
MARGIN-LEFT: 2px;
BACKGROUND: #ffffff;
float:left;
}
 
#droite
{
MARGIN-BOTTOM: 5px;
HEIGHT: 250px;
WIDTH: 160px;
BACKGROUND: #ffffff;
float:left;
}
 
#pied
{
HEIGHT: 20px;
WIDTH: 860px;
BACKGROUND: #FF9933;
clear:both;
}

21/12/2008, 14h24
Erwan31

Citation:

Envoyé par Deallyra

Le choix d'un doctype permet d'avoir un effet commun aux divers navigateurs.

Attention pas tout les doctype ;) Un doctype HTML4 transitionnal sans URI
fait par exemple basculer les navigateurs graphique en mode Quirks.
J'ai perdu l'URL avec le tableau récapitulant les différents mode de rendu selon le choix du doctype, je vais tâcher de la retrouver. ;)
21/12/2008, 16h23
Deallyra

Merci beaucoup Erwan, cela m'intéresserait.

Sinon... Pourquoi ouvrir deux fois la balise HTML 8O
21/12/2008, 16h58
faamugol

1 pièce(s) jointe(s)

Merci pour la reponse,

Comment dois faire pour garder les tag et les attributs en masjuscule, fautil un iquement que j'enleve le mot STRICT ?

J'ai utilise absolute car c'est par rapport à la div principal conteneur que je mesure la distance.
J'ai utilisé ton code mais tout est dispersé. Je met en pièces en image de la subdivision des divs . Mais je n'arrive vraiment pas.

Les div gauche, droite, centre ont une lageur fixe lmais longeur variable.

Merci de votre aide,
21/12/2008, 17h37
Deallyra

Citation:

Comment dois faire pour garder les tag et les attributs en masjuscule, fautil un iquement que j'enleve le mot STRICT ?

Pourquoi les garder en majuscule? :aie:
21/12/2008, 19h06
faamugol

Merci,

c'est pour la lisibilite,

mais ça ce n'est pas important.

Mon problème c'est l'alignement .

Merci d'avance,
21/12/2008, 19h27
Erwan31

Citation:

Envoyé par Deallyra

Merci beaucoup Erwan, cela m'intéresserait.

http://www.webdevout.net/doctype-switching (en)
Les 2 distinctions principales à faire se trouvent au niveau des DTD HTML 4 transitionnal incomplets qui font basculer en mode Quirks, tout comme le DTD HTML 4.0 transitionnal complet pour ce qui est des navigateurs alternatifs récents.
Le "A" c'est pour Almost standard (presque standard).
22/12/2008, 00h38
Candygirl

Citation:

Envoyé par Macmillenium

1) Tu déclare un DTD strict, tous tes tag/attribut doivent être en minuscule;

Ce n'est pas le strict qui est à l'origine de l'interdiction des majuscule mais le choix du langage. En xhtml, transitionnel ou strict, les éléments ou attributs en majuscules sont proscrits alors que l'emploi des majuscules est toléré en html4.01, aussi bien transitionnel que strict.

Citation:

Envoyé par faamugol

Merci pour la réponse,
Avec le code suivant, je n'arrive pas à potionner mon div Pied à la fin de la page dans IE7 et FF.
En plus la couleur de fond de la div conteneur n'apparait pas.

Du moment que tous les éléments dans ton div contenur sont positionnés en absolute, celui-ci ,ne les prenant pas en compte pour calculer sa hauteur, obtient une hauteur nulle et il est donc normal que tu ne voies pas la couleur de fond ou que ton footer se retrouve tout en haut.

En utilisant un montage à l'aide de flottants comme suggéré ce problème devrait disparaître

Citation:

Envoyé par faamugol

quelle difference y il entre MARGIN-LEFT et LEFT tout simplement ?

La propriété left s'utilise pour placer les éléments positionnés
22/12/2008, 09h39
Macmillenium

Citation:

Envoyé par Candygirl

Ce n'est pas le strict qui est à l'origine de l'interdiction des majuscule mais le choix du langage. En xhtml, transitionnel ou strict, les éléments ou attributs en majuscules sont proscrits alors que l'emploi des majuscules est toléré en html4.01, aussi bien transitionnel que strict.

"strict" fait référence au langage qu'il/elle a déjà déclaré, donc xhtml.
Merci pour les précisions :-)
22/12/2008, 10h02
Deallyra

Non non.

Strict ne veut pas dire xHTML é_è

strict peut être utilisé pour HTML...

Citation:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
22/12/2008, 10h08
Macmillenium

Citation:

Envoyé par Macmillenium

"strict" fait référence au langage qu'il/elle a déjà déclaré, donc xhtml.

Citation:

Envoyé par Deallyra

Non non.

Strict ne veut pas dire xHTML é_è

strict peut être utilisé pour HTML...

Je sais mais je parle de "faamugol" qui a déclaré xhtml comme langage :-D
Encore merci :oops:

Merci pour vos réponses,

entre temps j'ai trotuvé une solution sur un autre site.

ça marche bien en IE7 et FF mais avec IE6 il ya une difference entre ce que demande et ce que l'on voit sur l'ecran.
IE6 arrive d'une façon ou d'une autre à ajouter ou diminuer des pixels par ci ou par là.

Y a t il un moyen de tester quel navigateur le client utilise et adapeter les dimensions en fonctions.

J'aimerais que mon site fonctionne au moins pour IE6, IE7 et FF.

Merci d'avance,

CSS :

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
99
100
101
102
103
104
 
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.8em;
margin: 10px;
background-image: url(back.png); 
padding-bottom: 0px; 
background-repeat: repeat-x; 
background-color: #b2b2b2; 
 
}
 
#conteneur {
position: relative;
width: 860px;
margin: 0 auto; 
background-color:#b2b2b2;
}
 
#header {
height: 100px;
background-color: #dddddd;
}
 
#centre {
background-color: #fffbbb; 
margin-left: 150px;
margin-right: 150px;
}
#gauche {
position: absolute;
background-color: #ff9934; 
left:0;
width: 150px;
}
#droite {
background-color: #ffffff; 
position: absolute;
right:0;
width: 150px;
}
 
#pied {
background-color: #ff9933; 
height: 30px;
background-color: #99cc99;
}
 
 
 
le HTML 
 
 
<!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> 
<head> 
<title> websote </title> 
<meta name="generator" content="editplus"> 
<meta name="author" content=""> 
<meta name="keywords" content=""> 
<meta name="description" content=""> 
 
<link rel="stylesheet" type="text/css" href="toto.css" /> 
 
</head> 
 
</head>
 
<body>
 
<div id="conteneur">
 
	  <div id="header">header </a>
 
</div>
 
	  <div id="gauche"><p>menu</p>
	  	<p>largeur fixe : 150px</p>
	  </div>
 
	  <div id="droite"><p>droite</p>
	  	<p>largeur fixe : 150px</p>
	  </div>
 
  	<div id="centre">
  	  partie centrale qui &quot;pousse&quot; les colones vers le bas.<br />
 
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	</div>
 
	  <div id="pied">pied de page</div>
 
</div>
 
 
</body>
</html>

Bonjour,

Il existe en effet, des commentaires conditionnels, te permettant d'ajouter des styles selon le navigateur.
Code:

1 2 3 4 5 6 7 

Merci pour vos réponses,

Cidessous le code que j'utilise pour differencier

FF, IE6 et IE7 est t-juste ? la syntaxe est t elle bonne ?

ça fonctionne mais je me demande s'il marcher à tous les cours pôur toutes les versions FF, IE6 et IE7 respectivement.
Code:

1 2 3 4 5 6 7 8 9 10 11  <link href="../style_css/menu_css.css" rel="stylesheet" type="text/css" />   
Merci d'avance,

23/12/2008, 22h01
Deallyra

IF lte IE6

Si inférieur ou égal à IE6.

Tu ne gères pas le cas d'IE5 ou inférieur.

Après... Pour IE7 et non IE... Il y a des différences?
24/12/2008, 07h43
faamugol

Merci ,

oui j'aimerais bien, je l'ai dejà fait IE5.5 m'affiche 
au debut de la page et ensuite , toute la page est decalé vers la gauche, alors que je voudrais la centrer avez une idée ?

Citation:

Pour IE7 et non IE... Il y a des différences?

non IE c'est pour FF ou autre navigateurs qu'IE.

Merci si vous avez des idées pour IE5,