Compatibilité page css Internet explorer

**balto** · 13/11/2005, 12h07

Salut,

J'ai un soucis de compatibilité entre Internet Explorer et Opéra notamment

J'ai crée une page css avec une partie droite (en float right), une partie gauche (en float left) et un contenu central qui vient donc se placer entre les 2 parties droite et gauche. Je n'ai pas spécifié de largeur à ce contenu. Dans ce contenu j'ai placé un cadre avec du texte et une image. J'ai appliqué à ce cadre une marge de facon a ce que ses bords latéraux ne viennnet pas se coller à ceux des parties droite et gauche.

margin: 20px 20px 15px 5px;

Voila le probleme que je rencontre :

- dans Internet Explorer tout va bien et le cadre est bien placé au centre de la page et ses bords latéraux sont bien décollés des bords des parties droite et gauche.

- par contre dans Opéra les bords latéraux du cadre touchent ceux des partie droite et gauche.

Comment puis-je parvenir (dans Opéra) à décaller les bords de mon cadre de ceux des parties droite et gauche ?

Merci pour vos précisions et votre aide

balto

**Nesmontou** · 13/11/2005, 12h32

Salut, donne-nous plus de code (pas trop) : html de tes blocs, css les concernant... ;-)

**wikipierre** · 13/11/2005, 12h34

Salut,
Essaye de rajouter ceci dans le cadre du milieu :

Code :

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

padding: 20px 20px 15px 5px;

Essaye aussi de valider ton code au W3C.

**balto** · 13/11/2005, 13h22

Voila le code html

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
 
 
<!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">
<head>
<title>relaxation</title>
<meta http-equiv="Content-Type" 
      content="text/html; charset=iso-8859-15" />
<link href="relaxattitude.css" rel="stylesheet" type="text/css" />
</head>
 
 
<body>
 
<!-- En-tête -->
<div id="header"> 
 
</div>
 
<!-- les 3 grandes colonnes -->
<div id="global">
 
<!-- Partie gauche -->
 
  <div id="partiegauche">
 
  </div>
 
<!-- Partie droite -->
 
 
  <div id="partiedroite"> 
 
  </div>
 
<!-- Partie centrale -->  
 
 
  <div id="contenu"> 
 
  <div class="cadre"> 
    <p><img src="fp5energie.jpg" width="83" height="99" style="float:left; margin: 4px 10px 0 0; border:0" />Etape 1 : <a href="relaxattitude2.htm">des exercices physiques</a> rapides à faire 
      mais très efficaces</p>
 
  </div>
 
 
  <!-- Pied de page -->
  <div id="pied"> 
      </div>
 
</div>
 
</body>
</html>

Voila le code css

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
70
 
/* Mise en page globale */
body { 
width: 760px;
margin-right: auto;
margin-left: auto;
padding: 0;
background: ;
color: ;
font-size: 70%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
#global { 
width: 760px;
 
}
 
/* partie droite */
#partiedroite {
	float: right;
	width: 160px;
	margin: 0 0 8px 10px;
	background-color: #CCCCCC;
 
}
 
/* partie gauche */
#partiegauche {
	float: left;
	width: 150px;
	margin: 0 10px 0 0;
	background-color: #00FF00;
 
}
 
 
/* contenu central */
#contenu {
 
	margin-left: 150px;
	margin-right: 160px;
	background-color: #FFFFFF;
}
 
 
}
#contenu .cadre {
 
    margin: 20px 20px 15px 5px;
	color: green;
	background-color: #00FF66;
 
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thick;
	border-style: solid;
 
 
}
 
 
/* pied */
#pied {
	clear: both;
         width: 760px;
	margin: 0;
	background-color: #33FF33;
}

Merci à vous

Balto

**balto** · 13/11/2005, 13h24

Wikipierre : j'ai essayé d'ajouter un padding dans le css du cadre du milieu mais ca ne change rien

Merci pour ton aide

Balto

**wikipierre** · 13/11/2005, 13h31

Salut,
Voila ton CSS :

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
/* Mise en page globale */ 
body { 
width: 760px; 
margin-right: auto; 
margin-left: auto; 
padding: 0; 
background: White; 
color: Black; 
font-size: 70%; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
} 
 
#global { 
width: 760px; 
 
} 
 
/* partie droite */ 
#partiedroite { 
   float: right; 
   width: 160px; 
   margin: 0 0 8px 10px; 
   background-color: #CCCCCC; 
 
} 
 
/* partie gauche */ 
#partiegauche { 
   float: left; 
   width: 150px; 
   margin: 0 10px 0 0; 
   background-color: #00FF00; 
 
} 
 
 
/* contenu central */ 
#contenu { 
 
   margin-left: 150px; 
   margin-right: 160px; 
   background-color: #FFFFFF; 
} 
 
 
} 
#contenu .cadre { 
 
    margin: 20px 20px 15px 5px; 
   color: green; 
   background-color: #00FF66; 
 
   border-top-width: thin; 
   border-right-width: thin; 
   border-bottom-width: thin; 
   border-left-width: thick; 
   border-style: solid; 
 
 
} 
 
 
/* pied */ 
#pied { 
   clear: both; 
         width: 760px; 
   margin: 0; 
   background-color: #33FF33; 
}

Ton CSS était invalide a cause des attributs background et color de Body ils étaient vides.

Il y a une érreur que je n'arrive pas a résoudre :

Ligne: 46
Parse error - Unrecognized : }

**wikipierre** · 13/11/2005, 13h34

Salut,
Pour ton HTML voila:

<!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">
<head>
<title>relaxation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link href="relaxattitude.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div id="header">

</div>


<div id="global">



<div id="partiegauche">

</div>



<div id="partiedroite">

</div>



<div id="contenu">

<div class="cadre">
<p><img src="fp5energie.jpg" width="83" height="99" alt="Image" />Etape 1 : <a href="relaxattitude2.htm">des exercices physiques</a> rapides à faire
mais très efficaces</p>
</div>


<div id="pied"></div>

</div>
</div>

</body>
</html>

**balto** · 13/11/2005, 15h16

Ben ca ne change pas vraiment mon truc. J'ai toujours dans Opéra les bords latéraux de mon cadre qui sont collés à mes parties droite et gauche

Hum pas simple tout ça

**wikipierre** · 13/11/2005, 15h21

Salut,
Je te mettais juste la validation

.

Dans le bloc de droite rajoute :

Code :

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

padding-right: 10px;

Et de gauche :

Code :

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

padding-left: 10px;

**balto** · 13/11/2005, 16h32

En rajoutant

Code :

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

1
2
 
padding-right: 10px;

j'augmente la taille du contenu de ma partie latérale mais le bord du cadre du mileu colle toujours au bord de la partie latérale !!

Oulala ca chauffe dans ma tete