Problème d'espace sur IE menu vertical avec image de fond

**dom dom from the dom** · 09/03/2007, 10h59

Salut,

Une colle qui me skotche depuis 2 jours.
J'ai un Menu vertical en css avec des images de fond.
Sur FF, pas de problème.
Par contre sur IE, il me met d'ENORMES espaces entre les images.
j'ai tourné le problème dans tous les sens, mais rien à faire.
la seule astuce que j'ai trouvé c'est de mettre une bordure sur chaque <LI>, mais bon c'est pas tip top.

donc voilà mon HTML et mon CSS

Grand merci à quiconque trouvera une solution
TCHOUSS

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
  <HEAD>
  <META http-equiv="content-type" content="text/html; charset=windows-1250">
  <META name="generator" content="PSPad editor, www.pspad.com">
 
  <LINK rel="stylesheet" href="./css/cp2.css" type="text/css">
 
  <TITLE></TITLE>
 
  </HEAD>
  <BODY>
 
<!------------------------- GLOBAL -------------------------------------------->
      <DIV id="global">
 
          <!-------------------- ENTETE --------------------------------------->
          <DIV id="entete">
              <A href="#">
                  <IMG src="./image/logo.jpg" alt="">
              </A>
          </DIV><!-------------- FIN ENTETE ----------------------------------->
 
          <!----------------------- PRINCIPAL --------------------------------->
          <DIV id="contenu_principal">CONTENU PRINCIPAL
 
              <!------------------ CONTENEUR MENU ----------------------------->
              <DIV id="conteneur_menu">CONTENEUR MENU
 
                  <!-------------- MENU --------------------------------------->
                  <DIV id="menu">
                    <UL id="bouton_menu">
                      <LI><A href="">Accueil</A></LI>
                      <LI><A href="">Programmes</A></LI>
                      <LI><A href="">Partenariat</A></LI>
                      <LI><A href="">Financement</A></LI>
                    </UL>
                  </DIV>
                  <!--------------- FIN MENU ---------------------------------->
 
                  <!------------------ PETIT CADRE GAUCHE --------------------->
                  <DIV id="cadre_gauche">CADRE</DIV>
                  <!----------------- FIN PETIT CADRE GAUCHE ------------------>
 
              </DIV><!------------ FIN CONTENEUR MENU ------------------------->
 
              <!----------------- CONTENU 1 ----------------------------------->
              <DIV id="contenu1">CONTENU 1</DIV>
              <!----------------- FIN CONTENU 1 ------------------------------->
 
              <!------------------ CONTENU 2 ---------------------------------->
              <DIV id="contenu2">CONTENU 2</DIV>
              <!------------------ FIN CONTENU 2 ------------------------------>
 
          </DIV><!----------------- FIN PRINCIPAL ----------------------------->
 
          <!---------------------- PIED PAGE ---------------------------------->
          <DIV id="pied_page">PIED DE PAGE</DIV>
          <!---------------------- FIN PIED PAGE ------------------------------>
 
      </DIV><!------------ FIN DE GLOBAL -------------------------------------->
 
  </BODY>
</HTML>

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
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
* {
  margin: 0;
  padding: 0;
}
 
/*-------------------------- Propriétés du BODY ------------------------------*/
body {
       margin: 0; /* pour éviter les marges */
       text-align: center; /* pour corriger le bug de centrage IE  a voir avec #global */
       background-image:url(../image/motif_fond.gif);
     }
 
 
/*------------------------- Propriétés Du Cadre GLOBAL -----------------------*/
#global {
          margin-left: auto;
          margin-right: auto;
          width: 770px; /* largeur obligatoire pour être centré */
          text-align: left; /* on rétablit l'alignement normal du texte suite au bug Explorer*/
        }
 
 
/*----------------------- Propriétés de L'ENTETE -----------------------------*/
div#entete {
              width:770px;
              height:75px;
              background-image:url(../image/entete.jpg);
              background-repeat: no-repeat;        
              overflow:hidden;
           }
 
 
/*---------------------- Propriétés du Cadre PRINCIPAL -----------------------*/
div#contenu_principal {
                        position:relative;                      
                        width:770px;
                        background-color:fbfbfb;
                        overflow:auto;
                      }
 
 
/*--------------------- Propriétés du CONTENU 1 ------------------------------*/
div#contenu1 {
                float:left;
                width:285px;
                background-color:#FFCC00;
              }
 
 
/*------------------------- Propriétés du CONTENU 2 --------------------------*/
div#contenu2 {
                float:right;
                width:285px;
                background-color:#FF3300;
              }
 
 
/*------------------------ Propriétés du Cadre MENU --------------------------*/
div#conteneur_menu {
                      width:200px;
                      float:left;
                      background-color:fbfbfb;
                      /*border: solid 1px;*/
 
                    }
 
 
/*----------------------- Propriétés du MENU ---------------------------------*/	
div#menu {
            width:200px;
            background-color:fbfbfb;
            overflow:auto;
            /*border: solid 1px;*/
 
          }	
 
 
/*---------------------- Propriétés du Petit Cadre de Gauche -----------------*/
div#cadre_gauche {
                    width:200px;
                    background-color:#CC99CC;
                    overflow:auto;
 
                  }
 
 
/*----------------------- Propriétés du PIED DE PAGE -------------------------*/	
div#pied_page {
                width:770px;
                background-color:#33FF99;
              }
 
 
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
 
/*--------------------- Propriétés des IMAGES --------------------------------*/
img {
display:block;
border:none;}
 
 
/*-------------------- Propriétés du MENU ------------------------------------*/
#bouton_menu {
                list-style-type: none;
                margin-left:5px; 
 
              }
 
 
#bouton_menu li {
	                 background: url(../image/bouton_menu_bleu.gif) no-repeat 0 0;
	                 color:#fff;
                   /*border: 1px solid fbfbfb;*/
	                 margin-bottom: 2px;
 
	               }
 
 
#bouton_menu li a {
                    background: url(../image/bouton_menu_bleu.gif) no-repeat 0 0;
	                  display: block;
	                  color: #fff;
	                  font: 1em;
	                  line-height: 1em;
	                  text-indent: 40px;
	                  text-decoration: none;
	                  padding:4px 0;
 
                  }
 
 
#bouton_menu li a:hover, #bouton_menu li a:focus, #bouton_menu li a:active 
{
	/*text-decoration: underline ;*/
	font-weight:bold; 
	background: url(../image/bouton_menu_orange.gif) no-repeat 0 0;
}

**XtoX** · 09/03/2007, 11h13

Déjà commece par utiliser les balise code pour ton post, ça facilite la lecture.

Ensuite, je ne reproduis pas ton erreur sous IE6.

**dom dom from the dom** · 09/03/2007, 11h30

Désolé,

1er Post sur le forum.
Je sais même pas si j'utilise les balise code correctement.

Arrête moi si je dis des con...ries, mais l'erreur ne se produit qu'avec une image de fond. Donc si tu n'as pas d'images, on a l'impression que tout roule.
Mon image de fond pour le menu fait 149 * 28 px.

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
  <HEAD>
  <META http-equiv="content-type" content="text/html; charset=windows-1250">
  <META name="generator" content="PSPad editor, www.pspad.com">
 
  <LINK rel="stylesheet" href="./css/cp2.css" type="text/css">
 
  <TITLE>CECIM PRESTIGE</TITLE>
 
  </HEAD>
  <BODY>
 
<!------------------------- GLOBAL -------------------------------------------->
      <DIV id="global">
 
          <!-------------------- ENTETE --------------------------------------->
          <DIV id="entete">
              <A href="http://www.cecim.fr">
                  <IMG src="./image/logo.jpg" alt="cecim prestige">
              </A>
          </DIV><!-------------- FIN ENTETE ----------------------------------->
 
          <!----------------------- PRINCIPAL --------------------------------->
          <DIV id="contenu_principal">CONTENU PRINCIPAL
 
              <!------------------ CONTENEUR MENU ----------------------------->
              <DIV id="conteneur_menu">CONTENEUR MENU
 
                  <!-------------- MENU --------------------------------------->
                  <DIV id="menu">
                    <UL id="bouton_menu">
                      <LI><A href="">Accueil</A></LI>
                      <LI><A href="">Programmes</A></LI>
                      <LI><A href="">Partenariat</A></LI>
                      <LI><A href="">Financement</A></LI>
                    </UL>
                  </DIV>
                  <!--------------- FIN MENU ---------------------------------->
 
                  <!------------------ PETIT CADRE GAUCHE --------------------->
                  <DIV id="cadre_gauche">CADRE</DIV>
                  <!----------------- FIN PETIT CADRE GAUCHE ------------------>
 
              </DIV><!------------ FIN CONTENEUR MENU ------------------------->
 
              <!----------------- CONTENU 1 ----------------------------------->
              <DIV id="contenu1">CONTENU 1</DIV>
              <!----------------- FIN CONTENU 1 ------------------------------->
 
              <!------------------ CONTENU 2 ---------------------------------->
              <DIV id="contenu2">CONTENU 2</DIV>
              <!------------------ FIN CONTENU 2 ------------------------------>
 
          </DIV><!----------------- FIN PRINCIPAL ----------------------------->
 
          <!---------------------- PIED PAGE ---------------------------------->
          <DIV id="pied_page">PIED DE PAGE</DIV>
          <!---------------------- FIN PIED PAGE ------------------------------>
 
      </DIV><!------------ FIN DE GLOBAL -------------------------------------->
  </BODY>
</HTML>

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
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
 
* {
  margin: 0;
  padding: 0;
}
 
/*-------------------------- Propriétés du BODY ------------------------------*/
body {
       margin: 0; /* pour éviter les marges */
       text-align: center; /* pour corriger le bug de centrage IE  a voir avec #global */
       background-image:url(../image/motif_fond.gif);
     }
 
 
/*------------------------- Propriétés Du Cadre GLOBAL -----------------------*/
#global {
          margin-left: auto;
          margin-right: auto;
          width: 770px; /* largeur obligatoire pour être centré */
          text-align: left; /* on rétablit l'alignement normal du texte suite au bug Explorer*/
        }
 
 
/*----------------------- Propriétés de L'ENTETE -----------------------------*/
div#entete {
              width:770px;
              height:75px;
              background-image:url(../image/entete.jpg);
              background-repeat: no-repeat;        
              overflow:hidden;
           }
 
 
/*---------------------- Propriétés du Cadre PRINCIPAL -----------------------*/
div#contenu_principal {
                        position:relative;                      
                        width:770px;
                        background-color:fbfbfb;
                        overflow:auto;
                      }
 
 
/*--------------------- Propriétés du CONTENU 1 ------------------------------*/
div#contenu1 {
                float:left;
                width:285px;
                background-color:#FFCC00;
              }
 
 
/*------------------------- Propriétés du CONTENU 2 --------------------------*/
div#contenu2 {
                float:right;
                width:285px;
                background-color:#FF3300;
              }
 
 
/*------------------------ Propriétés du Cadre MENU --------------------------*/
div#conteneur_menu {
                      width:200px;
                      float:left;
                      background-color:fbfbfb;
                      /*border: solid 1px;*/
 
                    }
 
 
/*----------------------- Propriétés du MENU ---------------------------------*/	
div#menu {
            width:200px;
            background-color:fbfbfb;
            overflow:auto;
            /*border: solid 1px;*/
 
          }	
 
 
/*---------------------- Propriétés du Petit Cadre de Gauche -----------------*/
div#cadre_gauche {
                    width:200px;
                    background-color:#CC99CC;
                    overflow:auto;
 
                  }
 
 
/*----------------------- Propriétés du PIED DE PAGE -------------------------*/	
div#pied_page {
                width:770px;
                background-color:#33FF99;
              }
 
 
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
 
/*--------------------- Propriétés des IMAGES --------------------------------*/
img {
display:block;
border:none;}
 
 
/*-------------------- Propriétés du MENU ------------------------------------*/
#bouton_menu {
                list-style-type: none;
                margin-left:5px; 
 
              }
 
#bouton_menu li {
	                 background: url(../image/bouton_menu_bleu.gif) no-repeat 0 0;
	                 color:#fff;
                   border: 1px solid fbfbfb;
	                 margin-bottom: 2px;
 
	               }
 
#bouton_menu li a {
                    background: url(../image/bouton_menu_bleu.gif) no-repeat 0 0;
	                  display: block;
	                  color: #fff;
	                  font: 1em;
	                  line-height: 1em;
	                  text-indent: 40px;
	                  text-decoration: none;
	                  padding:4px 0;
 
                  }
 
#bouton_menu li a:hover, #bouton_menu li a:focus, #bouton_menu li a:active 
{
	/*text-decoration: underline ;*/
	font-weight:bold; 
	background: url(../image/bouton_menu_orange.gif) no-repeat 0 0;
}

Problème d'espace sur IE menu vertical avec image de fond

CSS

Vue hybride

Discussions similaires

Partager

Partager