Style CSS qui s'applique sur un élément non concerné [IE8]

**alexgille** · 10/08/2010, 10h58

Bonjour à tous!
Voici mon code HTML sans les fonction JQuery:

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
 
<html>
<head>
<meta http-equiv="content-type" content="ISO-8859-1" />
<style type="text/css">
 
	body {
		background: #000000;
	}
 
	#mainNav {
		width: 174px;
		margin: 0;
		padding: 0;
	}
 
	#mainNavUpline {
		background: url("../images/mainNAV.h.png");
		background-repeat: no-repeat;
		height: 2px;
		width: 173px;
		margin: 0;
		padding: 0;
		line-height: 0px;
		font-size: 0px;
	}
 
	#mainNavIcon {
		background: url("../images/mainNAV.catalogue.png");
		background-repeat: no-repeat;
		height: 28px;
		margin: 0;
		padding: 0;
	}
 
	#mainNavContentSpace {
		background: url("../images/sousmenu.png");
		background-repeat: repeat-x;
		background-color: #FFF;
		width: 173px;
		margin: 0;
		padding: 0;
	}
 
	.mainNavContainer {
		background: white;
		border: 1px gray dashed;
		display: none;
		position: absolute;
		margin: 0;
		padding: 0;
		width: 220px;
		height: auto;
		left: auto;
		top: auto;
		z-index: 100;
	}
 
	.mainNavContent a {
		color: black;
		font-size: 10px;
		font-weight: bold;
		text-decoration: none;
		font-family: Verdana, Geneva, sans-serif;
		display: block;
		border: 1px gray solid;
		margin: 6px;
		padding: 4px;
		padding-left: 17px;
		padding-top: 2px;
	}
 
	.mainNavContent a:hover {
		color: red;
		background: #DDD;
		background-image: url(../images/puce.png);
		background-repeat: no-repeat;
		background-position: 6px 9px;
	}
 
 
	.mainNavFirst a {
		display: block;
		margin: 2px;
                          border: 1px #CCC solid;
	}
 
</style>
<body>
	<div id="mainNav">
    	<div id="mainNavUpline"></div>
        <div id="mainNavIcon">&nbsp;</div>
        <ul id="mainNavContentSpace">
        	<li id="openCat" class="mainNavFirst"><a href="#">Par cat&eacute;gorie</a></li>
            <ul id="mainNavCat" class="mainNavContainer">
            </ul>
 
            <li id="openBrand" class="mainNavFirst"><a href="#">Par marque</a></li>
            <ul id="mainNavBrand" class="mainNavContainer">
            </ul>
 
            <li class="mainNavFirst"><a href="nouveautes.html">Nouveaut&eacute;s</a></li>
            <li class="mainNavFirst"><a href="promotions.html">Promotions</a></li>
		</ul>
    </div>
</body>
</html>

Mon problème est le suivant:
Lorsque j'applique un style aux élément de class mainNavFirst, ce style s'applique aussi aux éléments des listes d'id mainNavBrand et mainNavCat ce qui me dérange un peu car ces deux listes là ne sont pas du tout fille des éléments de class mainNavFirst.
Les éléments des deux listes sont chargés par ajax via JQuery et ont tous la class mainNavContent.
Je suis sous IE8.

Merci de votre aide!

**Bisûnûrs** · 10/08/2010, 11h06

Peut-être en ayant un code valide, tu éliminerais sans doute bon nombre de problèmes. En effet, un ul ne peut pas être enfant d'un autre ul, donc tes ul #mainNavCat et #mainNavBrand ne sont pas à leur place en l'état.

**alexgille** · 10/08/2010, 11h09

Effectivement je viens de vérifier et si on veut faire une sous liste il faut qu'elle soit contenu dans un <li> de la liste parent. J'avais oublié ce détails.

Merci en tout cas

Style CSS qui s'applique sur un élément non concerné [IE8] [CSS 2]

CSS

Discussions similaires

Partager

Partager