Discussion :

[rems033]

Bonjour à tous,

J'ai adapté un menu sous forme de liste (ul li) avec des coins arrondis.
Seulement, l'ensemble des menus sont collés les uns aux autres et je souhaiterai mettre un espace entre chaque item...
J'ai donc créé 2 class différentes suivant le type (une classe spacer et une classe menu).
Le résultat est OK sur IE7 mais pas bon sous FF, quelqu'un aurait une idée d'ou cela peut-il provenir ?

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
 
ul.crn{
    float: left;
    list-style: none ;
    width:215px;
}
 
ul.crn li.menu{
    background: #ccc url(../images/crn_05.gif) no-repeat top right;
    float: left;
    height: 30px;
    width:100%;
    margin: 0 20px;
    text-align: center ;
 
}
 
ul.crn li.spacer{
    padding-top:10px;
    height: 10px;
    width:100%;
    color:#FFFFFF;
    background-color:#FFFFFF;
 
}
 
ul.crn li.spacer:hover{
    height: 10px;
    width:100%;
    color:#FFFFFF;
    background-color:#FFFFFF;
 
}
 
ul.crn li.menu a:link, ul.crn li.menu a:visited{
    background: url(../images/crn_03.gif) no-repeat top left;
    color: #333;
    float: left;
    font-weight: bold;
    line-height: 30px;
    padding: 0 10px;
    text-decoration: none
}
ul.crn li.menu:hover{
    background: #333 url(../images/crn_10.gif) no-repeat top right
}
ul.crn li.menu a:hover, ul.crn li.menu a:focus{
    background: url(../images/crn_09.gif) no-repeat top left;
    color: #EBD938;
    text-decoration: none
}
ul.crn li.menu img{
    float: left;margin-top:2px
}

HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<ul class="crn">
    <li class="menu"><a href="#" >Les Statuts</a></li>
    <li class="spacer"></li>
    <li class="menu"><a href="#" title="link">Devenir Chauffeur</a></li>
    <li class="spacer"></li>
    <li class="menu"><a href="#" title="link">Devenir Exploitant</a></li>
    <li class="spacer"></li>
    <li class="menu"><a href="#" title="link">Le C.C.P.C.T.</a></li>
</ul>

Merci pour votre aide

[pop_up]

en mettant un float: left; sur ton li.spacer, est ce que cela te convient ?

J'ai essayé et cela rétabli l'espace entre les li.menu (testé sous FF2)

[rems033]

Parfait et valide sous FF3 aussi !
Mais d'ou cela provient-il et pourquoi un float:left ici ?

[pop_up]

en fait, je viens d'essayer d'enlever le float: left de menu.li et ça a l'air de donner la même chose.

Ce qui est bizarre c'est qu'avec ton code, si tu mets du contenu dans les li.spacer, il apparait à droite du li.menu sur firefox mais en dessous sous IE.

[devyan]

Parfait et valide sous FF3 aussi !
Mais d'ou cela provient-il et pourquoi un float:left ici ?

J'ai rencontré le problème inverse pour mon menu vertical et ai passé pas mal de temps à chercher d'où cela pouvait bien provenir...

Finalement, il s'avère que un élément LI vide a une hauteur fixe sous IE dépendant de ...


LA TAILLE DE LA POLICE DU TEXTE QUI N'EST PAS PRESENT !!!

Et ce même si l'on force "height:0" (c'est un comportement exclusif à IE)

Sinon, pourquoi ne pas avoir simplement utilisé une marge pour séparer tes éléments de liste ? (margin-bottom: ??px

[rems033]

Parcequ'en fait, il me laisse un bout d'image sur la droite dans l'espace inter <li>...