[CSS] : un espace apres un UL, j'arrive pas à le supprimer.

**hpfx** · 12/12/2005, 11h16

Bonjour,
Alors voilà j'ai un probleme : c'est un espace qui me fait tout décaler.

avant tout, voici une URL pour que vous puissiez voir de quoi je parle :
http://fbh2.free.fr/testmenu/3.html
passez la souris dessus "d'autres tests" (un menu apparait) descendez la souris dans ce menu (par exemple sur le mot "avec") et un sous menu apparait (un UL avec des LI A à l'interieur) mais ce nouveau sous menu ajoute un espace dans le menu précedant.

Ce probleme n'est PAS present sous Firefox, mais sous IE.
donc quand la solution sera donnée, il suffira de faire un petit "* html" pour corriger ce probleme sous IE.

Parlons maintenant un peu de cette page :
il s'agit d'un menu à deux niveaux qui à les propriétés suivantes :
- pas besoin de JAVASCRIPT pour firefox. (javascript assez léger sous IE)
- pas de bug avec les SELECT sous IE.

voilà, donc une fois ce bug corrigé ca donnerait un truc bien sympas.
pour info, je me suis basé sur : http://tanny.ica.com/ica/tko/tkoblog.nsf/dx/Select-tag-overlap-in-IE mais il n'a pas le bug puisque qu'il n'est pas multi-niveau, lui. (bouh...)

La structure du document html est tres simple, schematiquement :
UL LI A [UL LI A [UL LI A]]]
que des balises UL pour les menus, du LI pour les items et du A pour le lien.
le 1er menu est de classe "menu" (pas tres original)
par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<ul class="menu">
 <li><a href="#">Test</a>
       <ul>
          <li><a href="#">de</a></li>
          <li><a href="#">differents</a></li>
          <li><a href="#">menu</a></li>
       </ul>
 </li>
 <li>.... etc...

tout se passe dans le CSS, que voici :

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
140
141
 
ul.menu  {
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	background-color: #b3bfce;
	height: 22px;
	/*-fab-*/
	position:absolute;
    top:10px;  
    left:36px;
    display:block;
    z-index:2000;
}
 
 
ul.menu li {
	margin-top: 3px; /* un centrage à la marge */
	margin-bottom:-3px; /* IE :reduit de 3 px */
	text-indent : 5px;
	/* This allows each li to line up next to each other on a single line */
	display: inline;
	/* This allows each item to be horizontal. */
	float: left;
	/* This will be used later for dropdowns */
	position: relative;
}
ul.menu li a {
	/* change each anchor item to a block so that it takes up space */
	display:block;
	width:138px;
	text-decoration: none;
	/* WIN IE5 hack */
	height: 19px; /*---*/
 
}
 
.menu li a:hover {
	color: #333;
}
 
 
 
/* dropdown list styles */
.menu li ul  { 
	display: none;
	position: absolute;
	margin: 0;
	padding: 0; /*0 0 2px 0;*/
 top: 19px;/*22-3px*/
	/* IE 5 browsers will use the next two lines to display a faux drop shadow */
	border: 0 solid #474747;
	/* Mozilla */
	-moz-opacity: .9;
	/* Safari 1.1 */
	-khtml-opacity: .9;
	/* Safari 1.2 */
	opacity: .9;
}
.menu li > ul {
	top: auto;
	left: auto;
	/*-fab : deplacé de .menu li ul -*/
	padding: 0 0 2px 0; /*est-ce que ca marche ? */
}
 
* html .menu li ul {
	border-width: 0 2px 2px 0;
	display: block;
	left: -10000px; /* pourquoi ?, parceque..*/
}
 
.menu li:hover ul, .menu li.over ul, .menu li.sfhover ul  { /* lists nested under hovered list items */
	display: block;
	left: 0px;
}
 
/*-fab : on cache les menus de 2eme niveaux-*/
.menu li:hover ul ul, .menu li.over ul ul, .menu li.sfhover ul ul {
	display: none;
}
 
.menu li ul li {
background-color: #b8cbe5;
	margin: 0;
	padding: 0;
	/* for IE 5.x */
	margin-left: -1px;
	display: block;
	float: none;
	/* This allows Mozilla based and Safari browsers to display the faux drop shadow on the right. */
	border-right: 2px solid #474747;
	/* Set the border to 0 for IE */
	border-right-width: expression("0");
	voice-family: "\"}\"";
	voice-family:inherit;
	margin-left: 0;
}
 
 
 
/* This allows Mozilla based and Safari browsers to display the faux drop shadow on the bottom. */
.menu li ul li:last-child {
	border-bottom: 2px solid #474747;
}
/* IE 5.01 Hack, because IE 5.01 does not recognize the first style. This is thrown away then
	the other styles are applied. */
.menu li ul a {
}
.menu li ul a {
	color: #666;
	padding: 2px 4px;
	height: auto;
	width: 140px;/*151*/
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 140px;/*143*/
}
 
.menu li ul a:hover {
}
.menu li ul a:hover {
	background-color: white;
	color: #333;
}
 
 
/*-fab-*/	
.menu li li:hover ul, .menu li li.over ul, .menu li li.sfhover ul  {
	/* lists nested under hovered list items */
	display: block;
	position:absolute;
	left: 150px;
	top:0px;
}
* html .menu li li.over ul, * html .menu li li.sfhover ul /* special pour IE */
{left: 140px;
 float:left;
 position:absolute;
}

Bon, c'est un peu lourds (il ya des trucs de tests...), mais c'est j'espere comprehensible.

D'avance merci.

à l'aide....

PS : si vous êtes interrésés,
le CSS : http://fbh2.free.fr/testmenu/div/3.css,
le JS (IE) http://fbh2.free.fr/testmenu/div/3iefx.js

**escafr** · 12/12/2005, 11h43

faut que tu mettes tes LI a la suite comme ceci:

Code :

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

<ul><li><a href="#">de</a></li><li><a href="#">differents</a></li><li><a href="#">menu</a></li></ul>

vive IE!

**hpfx** · 12/12/2005, 12h14

Envoyé par escafr

faut que tu mettes tes LI a la suite comme ceci:

Code :

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

<ul><li><a href="#">de</a></li><li><a href="#">differents</a></li><li><a href="#">menu</a></li></ul>

Bon, ca me paraissait un peu gros

Mais j'ai quand même testé (tout, absolument tout le menu sur une seule ligne, sans espages ni rien).
et bien non, ce n'est pas ca le probleme.

merci quand même.

**franculo_caoulene** · 12/12/2005, 12h35

Salut,

Cette sélection ne fonctionne pas sous IE

Code :

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

1
2
3
4
5
6
.menu li > ul {
   top: auto;
   left: auto;
   /*-fab : deplacé de .menu li ul -*/
   padding: 0 0 2px 0; /*est-ce que ca marche ? */
}

Essaye en enlevant le >.
Pas évident de t'aider vu que c'est sous IE

**escafr** · 12/12/2005, 12h43

Envoyé par hpfx

Envoyé par escafr

faut que tu mettes tes LI a la suite comme ceci:

Code :

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

<ul><li><a href="#">de</a></li><li><a href="#">differents</a></li><li><a href="#">menu</a></li></ul>

Bon, ca me paraissait un peu gros

Mais j'ai quand même testé (tout, absolument tout le menu sur une seule ligne, sans espages ni rien).
et bien non, ce n'est pas ca le probleme.

merci quand même.

j'ai deja eu des pbs comme ca avc IE donc oui c'est un peu gros mais c'est possible..

sinon comme l'a dit franculo_caoulene ca doit venir du CSS mais la je laisse les experts parler!

**hpfx** · 12/12/2005, 14h01

Envoyé par franculo_caoulene

Salut,

Cette sélection ne fonctionne pas sous IE

Code :

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

1
2
3
4
5
6
.menu li > ul {
   top: auto;
   left: auto;
   /*-fab : deplacé de .menu li ul -*/
   padding: 0 0 2px 0; /*est-ce que ca marche ? */
}

Essaye en enlevant le >.

oui je sais, c'est volontaire, c'est un hack.

J'utilise ceci pour regler le top et le left en auto sous firefox.

pour info, j'utilise aussi le hack "* html" pour donner une regle "ie only".
le probleme ne viens pas de la. le top et le left sont correct.

Envoyé par franculo_caoulene

Pas évident de t'aider vu que c'est sous IE

Ouais, je sais, pour celà j'utilise l'extension "This page in IE", qui ouvre IE avec l'URL courante, c'est pratique.

merci.

**franculo_caoulene** · 12/12/2005, 14h55

Une solution serait d'utiliser un autre hack IE concernant la taile des <li>

Code :

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

1
2
3
.menu li ul li {
background-color: #b8cbe5;
border-bottom: 1px solid #b8cbe5;

Mais ça ne me convient pas des masse moi-même

**hpfx** · 12/12/2005, 16h11

Envoyé par franculo_caoulene

Une solution serait d'utiliser un autre hack IE concernant la taile des <li>

Code :

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

1
2
3
.menu li ul li {
background-color: #b8cbe5;
border-bottom: 1px solid #b8cbe5;

Mais ça ne me convient pas des masse moi-même

Bravo Bravo Bravo !

Alors là, chapeau !....
Je ne comprends pas comment, mais ca marche.
Apparament il s'agit d'un bug sous IE donc.

mille merci.

**clancy182** · 03/05/2006, 15h24

Je me permets de relancer ce post etant donné que je suis tombé sur le meme mobleme, je dois rajouter un border-bottom a mon li pour eviter le debordement.
Mais je trouve ca un peu cheap comme solution etant donné que ca introduit un petit espace blanc de 1px sous mon li.

Avez vous une autre solution a ce probleme ??

[CSS] : un espace apres un UL, j'arrive pas à le supprimer.

CSS

Discussions similaires

Partager

Partager