PDA

View Full Version : filter (opacity) conflicts with position property?



mehere8
Jul 18th, 2010, 03:07 PM
if you have a sub-list inside a list and the sub-list has a property -- filter: alpha(opacity=100) while all lists get a position property(like relative/absolute)
then that sub-list will disappear...

codes are as follows:


<html>

<head>

<title></title>
<style type="text/css">
ul, li {
list-style-type: none;
padding-left : 0 ;
margin-left : 0 ;
text-align : center ;
}
li {
margin-top : 10px ;
border : 1px solid black ;
}
#naviBar {
width : 50px ;
background-color : RGB(255, 128, 0) ;
position : relative ;
}
.subNaviBar {
position : absolute ;
width: 50px;
top: 0;
left : 50px ;
background-color : #aaa ;
}
#naviBar1 {
display : block ;
filter : alpha(opacity=100) ;
}
</style>
</head>

<body>
<ul id="naviBar">
<li>One<ul id="naviBar1" class="subNaviBar"><li>AAAAAA<ul class="subNaviBar"><li>haha</li><li>hahahaxxx</li></ul></li><li>BBBBBB</li></ul></li>
</ul>
</body>

</html>

if you comment the line in red, it will work as it is.
if you leave that line untouched and disable yellow lines, the sub-list will also show

so I am not sure whether filter(opacity) conflicts with position property. anyway to solve it?
(coz i want an effect like fading in, so i have to use filter(opacity) as an attribute)

thx in advance

Apostropartheid
Jul 18th, 2010, 07:43 PM
I certainly hope you just forgot to add in the DOCTYPE in your example code.

mehere8
Jul 21st, 2010, 05:16 AM
even if i add doctype, it doesn't appear


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>
<style type="text/css">
ul, li {
list-style-type: none;
padding-left : 0 ;
margin-left : 0 ;
text-align : center ;
}
li {
margin-top : 10px ;
border : 1px solid black ;
}
#naviBar {
width : 50px ;
background-color : RGB(255, 128, 0) ;
position : relative ;
}
.subNaviBar {
position : absolute ;
width: 50px;
top: 0;
left : 50px ;
background-color : #aaa ;
}
#naviBar1 {
display : block ;
/*filter : alpha(opacity=100) ;*/
}
</style>
</head>

<body>
<ul id="naviBar">
<li>One<ul id="naviBar1" class="subNaviBar"><li>AAAAAA<ul class="subNaviBar"><li>haha</li><li>hahahaxxx</li></ul></li><li>BBBBBB</li></ul></li>
</ul>
<div id="caption">here:</div>
</body>

</html>

if you uncomment the red line, a sublist will disappear even if opacity=100
very quirky

anyone can help?

mehere8
Jul 22nd, 2010, 09:44 AM
simply put, if you add the filter property for 'ul', then if there is a nested 'ul' under one 'li', that 'ul' will disappear ...