Opacity in Css werkt niet?
ik heb een menu met een dropdown.
maar de dropdown werkt niet in Internet Explorer
omdat de opacity niet w3valid is..
overal op internet staat toch dat het zo moet,
weet iemand waarom het niet werkt?
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
filter: alpha(opacity=90);
opacity: 0.9;
position: absolute;
z-index:999!important;
}
.menu ul a:hover ul{
visibility:visible;
filter: alpha(opacity=90);
opacity: 0.9;
position: absolute;
z-index:999!important;
}
ik heb het aangepast..
maar als ik de opacity weglaat, werkt het wel in IE
anders werkt de hele mouse-over niet..
Toevoeging op 30/01/2011 18:09:09:
als ik display:block; doe, doet hij het helemaal niet meer..
ook niet in Chrome en Firefox...
Code (php)
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
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
/* START MENU*/
.menu{
width:auto;
height:128px;
z-index:999;
margin-top:10px;
margin-left:10px;
}
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
position:relative;
z-index:999;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:999;
}
/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:999;
left:-1px;
top:25px;
}
/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:10px;
width:135px;
padding:7px 0;
color:#ffffff;
background:#991a1a;
text-decoration:none;
margin-right:4px;
text-align:center;
font-family:verdana, sans-serif;
z-index:999;
}
/* style the links hover */
.menu :hover{
color:#4b5053;
z-index:999;
}
/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
z-index:999;
width:135px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
opacity: 0.9;
filter: alpha(opacity=90);
position: absolute;
z-index:999;
}
.menu #menu li ul{
position:relative;
z-index:10000;
height:auto;
background:#000000;
}
/* END MENU*/
.menu{
width:auto;
height:128px;
z-index:999;
margin-top:10px;
margin-left:10px;
}
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
position:relative;
z-index:999;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:999;
}
/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:999;
left:-1px;
top:25px;
}
/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:10px;
width:135px;
padding:7px 0;
color:#ffffff;
background:#991a1a;
text-decoration:none;
margin-right:4px;
text-align:center;
font-family:verdana, sans-serif;
z-index:999;
}
/* style the links hover */
.menu :hover{
color:#4b5053;
z-index:999;
}
/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
z-index:999;
width:135px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
opacity: 0.9;
filter: alpha(opacity=90);
position: absolute;
z-index:999;
}
.menu #menu li ul{
position:relative;
z-index:10000;
height:auto;
background:#000000;
}
/* END MENU*/
Toevoeging op 30/01/2011 18:19:34:
validator geeft 2 errors:
Parse Error opacity=90)
en
Eigenschap opacity bestaat niet in CSS versie 2.1 maar wel in : 0.9 0.9
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.menu ul ul {
visibility:hidden;
position:absolute;
z-index:999;
width:135px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
opacity: 0.9;
filter: alpha(opacity=90);
position: absolute;
z-index:999;
}
visibility:hidden;
position:absolute;
z-index:999;
width:135px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
opacity: 0.9;
filter: alpha(opacity=90);
position: absolute;
z-index:999;
}
Je geeft bij de mouseover geen nieuwe height mee.. Die moet je ff setten bij de hover.
ik snap niet waarom de validator zegt dat de opacity en filter:alpha niet kloppen..
als ik die weg haal werkt het wel in IE..
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.menu ul ul {
display:none;
position:absolute;
z-index:999;
width:135px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
display:block;
-moz-opacity:0.9;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
z-index:999;
}
display:none;
position:absolute;
z-index:999;
width:135px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
display:block;
-moz-opacity:0.9;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
z-index:999;
}
Vergeet die hele W3 check eens, want geloof me, je site werkt er niet minder door als je het niet doet. Opacity werkt wel degelijk in IE. Zoals je zelf al aangaf, filter voor IE functies.
Wat je echter doet, voor je mouse-over zet je een visibility in. Dat is hier vrij nutteloos omdat je ul niet per definitie een block element is. Wat je dus doen kunt is wat Ozzie hierboven heeft staan.
Ik zie trouwens nog iets fouts.. Je UL lijkt binnen de A de staan. Dit gaat niet werken om redenen die niet eens met IE te maken hebben. Je 2e UL moet onder de LI komen, niet onder je A.
De li:hover werkt standaard niet in IE <7 wat je het beste kunt doen is een javascript gebruiken om dynamisch die klasse toe te voegen aan je li.
maar het werkt nog steeds niet in IE..
ik denk dat ik maar als background een png image moet doen met een opacity van 90%
dat is mijn laatste uitweg..
Toch bedankt voor al jullie hulp!!
Gewijzigd op 31/01/2011 13:25:03 door Jason van der Zeeuw
Gewijzigd op 31/01/2011 17:19:24 door Sander A
Sander A op 31/01/2011 17:17:24:
Opacity bestaat al langer dan css3..
Dat kan, maar W3C valideert het pas vanaf CSS3.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<div class="menu">
<ul>
<li><a href='#'>Item1</a></li>
<li><a href='#'>Item2</a>
<ul><li><a href='#'>Item2.1</a></li>
<li><a href='#'>Item2.2</a></li>
<li><a href='#'>Item2.3</a></li>
<li><a href='#'>Item2.4</a></li>
</ul></li>
<ul>
<li><a href='#'>Item1</a></li>
<li><a href='#'>Item2</a>
<ul><li><a href='#'>Item2.1</a></li>
<li><a href='#'>Item2.2</a></li>
<li><a href='#'>Item2.3</a></li>
<li><a href='#'>Item2.4</a></li>
</ul></li>
enzovoorts...
die hoort te kloppen..
er word overal goed naar verwezen en chrome en FF doen er niet moeilijk over
ik snap ook niet dat IE zo'n probleem maakt van die opacity?
het is niet W3 valid.. maar als ik het weghaal..
dan is de CSS W3 valid en werkt alles (alleen dus geen transparency)
Heb je een hover op display: block; ? i.p.v. visibility?
ik heb het toch echt allemaal geprobeerd..
en als ik de opacity toevoegt doet de hele mouseover het gewoon niet.. :S
ik heb het nu opelost met een .png background-image
die 90% opacity heeft ;)