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