problème de version de IE et FF

**faamugol** · 20/12/2008, 10h48

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,

**Deallyra** · 20/12/2008, 18h46

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.

**faamugol** · 21/12/2008, 12h22

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 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
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 css :

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
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;
}

**Macmillenium** · 21/12/2008, 13h34

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 :

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
 
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;
}

**Candygirl** · 22/12/2008, 00h38

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.

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

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

**Macmillenium** · 22/12/2008, 09h39

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 :-)

**Erwan31** · 21/12/2008, 14h24

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.

**Deallyra** · 21/12/2008, 16h23

Merci beaucoup Erwan, cela m'intéresserait.

Sinon... Pourquoi ouvrir deux fois la balise HTML

**faamugol** · 21/12/2008, 16h58

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,

**Deallyra** · 21/12/2008, 17h37

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?

**Erwan31** · 21/12/2008, 19h27

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

problème de version de IE et FF

CSS

Vue hybride

Discussions similaires

Partager

Partager