filter properties

**swaraj_here** · May 31, 2007 05:02

I have used a filter property in css...........but that is not working in IE 7 and ff and netscape..........what should I do?

I have created the class

ul#navmenu li.iehover li.iehover li a {
background: #f3f3f3;
color: #000000;
filter:alpha(opacity=68);

}

**hexburner** · May 31, 2007 05:08

This should do the trick.

Code CSS:

  ul#navmenu li.iehover li.iehover li a {
    background: #f3f3f3;
    color: #000000;
    filter:alpha(opacity=68);
    -moz-opacity:.68;
    opacity:.68;
}

**swaraj_here** · May 31, 2007 05:19

Originally Posted by hexburner

This should do the trick.

Code CSS:

  ul#navmenu li.iehover li.iehover li a {
    background: #f3f3f3;
    color: #000000;
    filter:alpha(opacity=68);
    -moz-opacity:.68;
    opacity:.68;
}

Really this is working..........but can you explain me this why did you proceed this way......i am really thankful to you...

**hexburner** · May 31, 2007 05:31

The part filter:alpha(opacity=68) is only supported by Internet Explorer.
The -moz-opacity:.68 is only supported by browsers of the Mozilla Foundation.
The opacity:.68 is for other browsers (=> this is the one that should be implemented by IE and so on)

**swaraj_here** · May 31, 2007 05:44

Originally Posted by hexburner

The part filter:alpha(opacity=68) is only supported by Internet Explorer.
The -moz-opacity:.68 is only supported by browsers of the Mozilla Foundation.
The opacity:.68 is for other browsers (=> this is the one that should be implemented by IE and so on)

unfortunately IE 7 is not handling this.......still it needs more affort......

**hexburner** · May 31, 2007 05:49

Put a live example online, because it works fine here in IE5.5, IE6, IE7, FF, NS7+, OP 8+, SA, SM, ... and so on.

**swaraj_here** · May 31, 2007 08:38

ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background-image: url(images/imgleftSubNavHoverBG.gif);
background-repeat: repeat-y;
color: #ff6600;
filter:alpha(opacity=100);
-moz-opacity: 100;
opacity: 100;

}

Is not working in IE 7

**hexburner** · May 31, 2007 09:29

This works just fine in IE7, but it seems that you've bumped into a bug.
If you remove the width in the CSS, the transparency fails...

Btw, why are you using those li:hover selectors? This way you would have to include a HTML Component with a CSS behavior-rule or use JS to fix this problem in IE?

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
        div#test {
            width:100%; /* Remove this width and the transparency will fail */
            filter:alpha(opacity=50);
            -moz-opacity:.50; /* Mind the dot */
            opacity:.50; /* Mind the dot */
        }
</style>
</head>
<body>
<div id="test">50% transparant</div>
</body>
</html>

**swaraj_here** · May 31, 2007 09:44

Originally Posted by hexburner

This works just fine in IE7.

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
        div#test {
            width:100%;
            filter:alpha(opacity=50);
            -moz-opacity:.50;
            opacity:.50;
        }
</style>
</head>
<body>
<div id="test">50% transparant</div>
</body>
</html>

Still it is not working for IE 7 and this is not inside div........this is inside <ul>
<li></li>
</ul>

**hexburner** · May 31, 2007 10:03

Well, beats me... :s

How about using different background-images an a:hover then?
Would that be a solution?

**Paul O'B** · Jun 1, 2007 06:01

Hi,

The element needs "haslayout" in IE.

A working example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#test {
background:red;
  /*opacity for IE5+*/
  filter: alpha(opacity=68);
  /*opacity for older Mozilla browsers*/
  -moz-opacity: 0.68;
  /*opacity for mozilla/safari*/
  opacity: 0.68;
   min-height:0;/* haslayout fix for IE7*/
}
/* mac hide - Force "haslayout" in IE6 \*/
* html #test{height:1&#37;}
/* end hide */

</style>
</head>
<body>
<div id="test">
    <p>This is a test : This is a test : This is a test : This is a testThis is a test : This is a testThis is a test : This is a testThis is a test : This is a testThis is a test : This is a testThis is a test : This is a testThis is a test : This is a testThis is a test : This is a testThis is a test : This is a testThis is a test : This is a testThis
        is a test : This is a testThis is a test : This is a test </p>
</div>
</body>
</html>

**hexburner** · Jun 1, 2007 06:10

That's why you're the CSS Guru

**Bob Carologees** · Jun 1, 2007 08:53

Ooh handy, didn't realise haslayout effected transparency. I think that was effecting some tooltips the other day.

User Tag List

Thread: filter properties

Thread Tools

Display

filter properties

IE 7 Issue....

Bookmarks

Bookmarks

Posting Permissions