Probleme de Marge sous IE

**Lost In Translation** · 11/03/2008, 10h27

Bonjour à tous,

J'ai un problème de compatibilité avec mon site web. Il ne s'affiche pas du tout bien sous Internet Explorer.

Voici le lien où vous pouvez le consulter.
site : http://j-pop-spirit.com/hs

Le problème :

Toute la partie en dessous du menu semble ne pas prendre un margin-top imposé dans mon CSS. Il se superpose donc au "dessus" du menu.

Les sources

Le HTML

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
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
 
<!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" lang="en">
<head>
  <link rel="stylesheet" href="style.css" type="text/css"  media="screen, projection" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>Hearsight</title>
  <script type="text/javascript">
    function chargement()
    {
      document.getElementById('chargement').style.display='none';
      document.getElementById('page').style.visibility='visible';
    }
  </script>
</head>
<body onload="chargement()">
 
  <div id="chargement">
    <img src="images/loading.gif" alt="préchargement du site hearsight" />Chargement ...
  </div>
 
  <div id="page" style="visibility:hidden;">
    <div id="entete">
      <a href="#" title="Page d'accueil lunette MP3 Hearsight">
        <img src="images/logo_vert.png" title="logo hearsight" alt="logohearsight"/>
      </a>
    </div>
 
    <div id="menu">
      <ul class="menu_haut">
        <li><a href="#">menu 1</a></li>
        <li><a href="#">menu 2</a></li>
      </ul>
    </div>
 
    <div id="contenu_principal"><!--Partie causant le probleme-->
      <div id="lunette_centre">
        <img src="images/lunette_index.png" title="Lunette Mp3 Hearsignt" alt="Lunette Mp3 Hearsight"/>
        <img src="images/logo_bleu.png" class="logo_bleu" />
      </div>
 
      <div id="texte_presentation"> 
        <p class="paragraphe_presentation">
              Hearsight et tout le tsoin tsoin. Ca marche comme ça et comme ça.
              Hearsight et tout le tsoin tsoin. Ca marche comme ça et comme ça.
              Hearsight et tout le tsoin tsoin. Ca marche comme ça et comme ça.
              Hearsight et tout le tsoin tsoin. Ca marche comme ça et comme ça.
              Hearsight et tout le tsoin tsoin. Ca marche comme ça et comme ça.
              Hearsight et tout le tsoin tsoin. Ca marche comme ça et comme ça.
              Hearsight et tout le tsoin tsoin. Ca marche comme ça et comme ça.
              Hearsight et tout le tsoin tsoin. Ca marche comme ça et comme ça.
              Hearsight et tout le tsoin tsoin. Ca marche comme ça et comme ça.
              Hearsight et tout le tsoin tsoin. Ca marche comme ça et comme ça.
              Hearsight et tout le tsoin tsoin. Ca marche comme ça et comme ça.
              Hearsight et tout le tsoin tsoin. Ca marche comme ça et comme ça.
              Hearsight et tout le tsoin tsoin. Ca marche comme ça et comme ça.
              Hearsight et tout le tsoin tsoin. Ca marche comme ça et comme ça.
        </p>
      </div>
    </div>
    <div id="pied">
      <p class="texte_footer">&copy; Hearsight 2008 | du texte et du texte</p>
    </div><!-- Fin de la partie posant probleme -->
  </div>
</body>
</html>

Le 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
 
/****************************/
/***** Contexte général *****/
/****************************/
 
*
{
  padding: 0;
}
 
html
{
  background: #373942;
}
 
body
{
  font-family: arial, sans-serif;
  font-size: 12px;
  width: 800px;
  margin: auto;
}
 
a img
{
  border:none;
}
 
/*******************/
/***** La page *****/
/*******************/
 
#chargement
{
  width:150px;
  height:50px;
  position:absolute;
  color:red;
  font-weight:bold;
  font-size:14px;
  background:white;
}
 
/**********************/
/***** Le contenu *****/
/**********************/
 
#page
{
  background-image: url("images/bg_contenu.jpg");
  background-repeat: no-repeat;
  width: 800px;
  height:1024px;
  position: absolute;
}
 
/********************/
/***** l'entete *****/
/********************/
 
#entete
{
  text-align: center;
  width: 800px;
  height: 255px;
}
 
/*******************/
/***** Le menu *****/
/*******************/
 
#menu
{
  width: 800px;
  height: 45px;
  position: absolute;
}
 
ul.menu_haut
{
  position: absolute;
  margin-top: -6px;
  margin-left: 20px;
  list-style: none;
}
 
ul.menu_haut li
{
  float:left;
  width:143px;
  text-align:center;
  background-image: url("images/menu_bouton_passif.png");
  padding:20px 0 20px 0;
}
 
.menu_haut li a
{
  color: #fff;
  width:143px;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
}
 
/********************************/
/***** Le contenu principal *****/
/********************************/
/* CSS de la partie posant probleme */
 
#contenu_principal
{
  height: 420px;
  width: 800px;
  margin-top: 50px;
}
 
#lunette_centre
{
  height: 426px;
  width: 511px;
  background-image: url("images/cadre_support_lunette.gif");
  background-repeat: no-repeat;
  margin-top: -5px;
  margin-left: 16px;
  position: absolute;
}
 
.logo_bleu
{
  float: right;
  margin-top: -90px;
  margin-right: 30px;
}
 
#texte_presentation
{
  background:#000;
  color:#FFF;
  border:2px solid #626574;
  float:right;
  height:394px;
  width:245px;
  margin-top:8px;
  margin-right:30px;
}
 
.paragraphe_presentation
{
  width: 220px;
  height: 360px;
  margin-top: 20px;
  margin-left: 20px;
  overflow:auto;
}
 
/***************************/
/***** le pied de page *****/
/***************************/
 
#pied
{
  width: 800px;
  background-image: url("images/bg_pied.png");
  background-repeat: no-repeat;
  position:absolute;
  margin-top: -7px;
  margin-left: 15px;
}
 
.texte_footer
{
  padding-top: 10px;
  text-align: center;
}

Si vous pouvez m'aiguiller. J'ai lu que sur IE, les margin auraient peut être des soucis lorsqu'un conteneur parent a une position attribuée du genre relative ou absolute...

Merci

**Deallyra** · 11/03/2008, 10h42

essaies donc ca...

Code :

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

*{margin : 0; padding : 0;}

ou sans réelles convitions; ca

Code :

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

1
2
3
4
5
<!--[If IE]>
<style type ="text/css">
*{zoom : 1;}
</style>
<![endif]>

**Lost In Translation** · 11/03/2008, 11h04

Je viens d'essayer les portions de codes et ceci n'a rien changé.
Mais merci pour l'aide.

Auriez-vous d'autres idées/pistes ?

**Erwan31** · 11/03/2008, 11h06

Bonjour,
ne pas oublier préciser les versions d'IE qui posent problème.
Tu as un autre problème sur IE6 qui vient du canal alpha (transparence) qui n'est pas interprété pour les PNG 32 bits. Fais une recherche sur transparence PNG.

**Erwan31** · 11/03/2008, 11h20

Il te suffit d'enlever le positionnement asbolue de ton menu qui n'est d'ailleurs pas utilise à mon avis.
Tu as donc 2 règles de style à modifier:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
#menu
{
  width: 800px;
  height: 45px;
}
#contenu_principal
{
  height: 420px;
  width: 800px;
  margin-top: 5px;
}

**Lost In Translation** · 11/03/2008, 11h42

Merci Erwan31, le problème est maintenant résolu.

Pour le PNG 32 bits, je n'étais pas du tout au courant. Je vais me renseigner.
Travaillant sous Linux/Debian... je n'ai aucun "Internet Explorer" de Windows et je n'avais eu qu'une "capture" d'écran envoyé par un collègue. Donc impossible de te dire quel version c'était...

Peut être la 7, en regardant les "boutons".

Pourrais-tu me joindre une capture sur IE6 que je voye "le soucis" de la transparence, car j'ai du mal à imaginer le rendu.

En tout cas, merci de vos aides à tous et de votre célérité.
Je reviendrais

Probleme de Marge sous IE

CSS

Vue hybride

Discussions similaires

Partager

Partager