positionnement différents entre deux navigateurs

**darcy** · 27/11/2006, 11h36

Bonjour,

le positionnement de mes blocs qui sont positionnés eux dans une div conteneur est différent sur firefox et IE
Sur Firefox, les blocs sont positionnés correctement mais sous IE ils sont décallés

et décallent la page
Je ne comprends pas pourquoi...i
Je vous mets le code :
Merci pour votre aide

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
 
#conteneur { 
 
	width:720px;
	height:660px;
	margin:auto;
	margin-top:20px;
	padding:30px;
	background-color: #EFEFEF;
        border-top:3px solid #00CC33;
 	font-size: 14px;
	font-style: normal;
	line-height: normal;
	letter-spacing:normal;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align: center;
	background-image: url(images/LOGO.jpg) ;  
	background-position: top right;
	background-repeat:no-repeat;
 
}
 
#haut_gauche {
 
 float:left; height:120px; width:120px;  margin-top:15px; border-top: 1px solid orange ;  background-image:url(images/gymnase.jpg);  background-position:center-top; background-repeat:no-repeat;
}
 
#haut_milieu  {
float:left; height:175px; width:120px; margin-top:15px; margin-left:30px; border-top: 1px solid orange
}
 
#bas_gauche  {
float:left; height:175px; width:120px; margin-left:65px;margin-top:25px; border-top: 1px solid orange;
}
 
#bas_milieu  {
float:left; height:175px; width:120px; margin-top:25px; margin-left:65px; border-top: 1px solid orange ;
} 
 
 
#haut_droit {
float:left; height:175px; width:120px; margin-top:15px; margin-left:50px; margin-right:50px;border-top: 1px solid orange; float:right;
}
 
#bas_droit {
float:left; height:175px; width:120px; margin-top:25px; margin-right:auto;  margin-left:50px;  border-top: 1px solid orange; float:right;
}
 
#bas {
clear:both;
}

**Bisûnûrs** · 27/11/2006, 11h52

Mets display:inline à tes déclarations :

#haut_gauche
#haut_milieu
#bas_gauche
#bas_milieu
#haut_droit
#bas_droit

**darcy** · 27/11/2006, 13h05

Merci pour cette réponse rapide !

j'essaye toussa tout à l'heure et te tiens au courant

**darcy** · 27/11/2006, 14h16

Non hélas

le problème persiste ...
mince alors !
Tout était impec et voila que ça repart en vrille...

**beencss** · 27/11/2006, 14h33

vous avez omis un point-virgule dans ce code après le border-top:

Code CSS :

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

1
2
3
#haut_milieu  {
float:left; height:175px; width:120px; margin-top:15px; margin-left:30px; border-top: 1px solid orange
}

**Bisûnûrs** · 27/11/2006, 14h43

@darcy : Vérifie bien sous IE cette question : Est-ce que les marges sont doublées par rapport à la marge que tu donnes ?

**darcy** · 27/11/2006, 14h45

Le positionnement dela page sous firefox est légèrement un peu plus haut (toutes les divs) alors que sous IE c'est ok..

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
*{
   margin:0;
   padding:0;
}
 
#en-tete 
	{
 
	position: relative;
	height: none;
	background-image:url(images/essaiban1.jpg); 
    padding: 30px;
    background-repeat:no-repeat;
    background-position-x:center;
    background-position-y:center;
	background-position:center;
	margin-top:20px;
	width: auto;
 
 
 
	}
 
body 
	{
	font-size:small;
	width: auto;
	height: auto;
	background-color: #EFEFEF; 
   	background-image: url(images/beauce12.jpg);
    background-position:top left;
	background-position-x:top;
    background-position-y:top;
    background-repeat:no-repeat;
 
  	border: 1px solid #fef0b2;
 
	}
 
#navigation { 
 
	width:800px;
	margin:0 auto;
	margin-top:3px;
 
 
 
 
 
}
 
 
 
#conteneur { 
 
	width:720px;
	height:660px;
	margin:auto;
	margin-top:20px;
	padding:30px;
	background-color: #EFEFEF;
    border-top:3px solid #00CC33;
 
	font-style: normal;
	line-height:120%;
	letter-spacing:normal;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align: center;
	background-image: url(images/LOGO.jpg) ;  
	background-position: top right;
	background-repeat:no-repeat;
	}
 
#haut_gauche {
float:left; height:120px; width:120px;  margin-top:15px; border-top: 1px solid orange ; margin-left:100px; margin-right:50px;   background-image:url(images/gymnase.jpg);  background-position:center-top; background-repeat:no-repeat;display:inline;
}
#haut_milieu  {
float:left; height:175px; width:120px; margin-top:15px;  border-top: 1px solid orange; background-image:url(images/cefim.jpg); background-position:center-top; background-repeat: no-repeat;display:inline; margin-left:40px; margin-right:30px;
} 
#bas_gauche  {
float:left; height:120px; width:120px; margin-left:100px;margin-top:25px; border-top: 1px solid orange; margin-right:50px; background-image: url(images/eol.jpg); background-position:center-top; background-repeat:no-repeat;display:inline;
}
#bas_milieu  {
float:left; height:120px; width:120px; margin-top:25px; margin-left:40px; border-top: 1px solid orange ;display:inline; margin-right: 30px; background-image: url(images/centre.jpg); background-position:center-top; background-repeat:no-repeat;
} 
 
 
 
#haut_droit {
float:left; height:120px; width:120px; margin-top:15px; margin-left: auto; margin-right:100px;border-top: 1px solid orange; float:right;display:inline; background-image:url(images/quantitec.jpg); background-position:center-top; background-repeat:no-repeat;
}
#bas_droit {
float:left; height:120px; width:120px; margin-top:25px; margin-right: auto; margin-right:100px;  border-top: 1px solid orange; float:right; display:inline; background-image:url(images/bureaucomcom.jpg); background-position:center-top; background-repeat:no-repeat;  
}
 
#bas {
clear:both;
}

**darcy** · 27/11/2006, 14h45

Envoyé par Bisûnûrs

@darcy : Vérifie bien sous IE cette question : Est-ce que les marges sont doublées par rapport à la marge que tu donnes ?

Oops tu veux dire quoi par là ?

**Bisûnûrs** · 27/11/2006, 14h50

C'est simple, sur IE, quand tu utilises les float et des marges horizontales, c'est-à-dire quand dans ton code tu as ça :

Code CSS :

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

1
2
3
4
5
6
7
8
#div1{
   float:left;
   margin-left:15px;
}
#div2{
   float:left;
   margin-left:15px;
}

le premier élément voit sa marge gauche doublée, donc elle vaudra 30px.

C'est un bug d'IE qu'on peut résoudre en mettant display:inline sur les éléments qui retrouvent alors leurs marges exactes.

**darcy** · 27/11/2006, 15h12

Ok j'ai saisi.. je pense que c'est ok là

Une dernière question si tu es encore là..
Pour la polcie utilisée dans ces blocs, vaut il mieux mettre les codes qui vont comme

Code CSS :

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

1
2
   font-style: normal; line-height:120%;letter-spacing:normal;font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;

dans les div #gauche #droite..ect ou alors directement dans le conteneur ?
merci

**Bisûnûrs** · 27/11/2006, 15h35

Tu as trois possibilités :

1- Soit tu les mets dans le conteneur, qui je pense est la meilleure solution.
2- Soit tu les mets dans les deux mais tu déclares comme ça pour ne pas avoir à répéter l'information :

Code CSS :

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