ie 7 and opacity problem

**phpster** · Aug 30, 2007 21:54

Hi All,

The below css works great in FF, but the opacity setting in IE7 does not seem to work...there was a post here previously about this and checking the hasLayout property. Its set to true for this element (its a div)...

Anyone have any ideas or hacks to get this sucker working in ie7?

#cover {
width: 100%;
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: Black;
filter:alpha(opacity=70);
opacity:.70;
z-index: -3;

}
TIA

**all4nerds** · Aug 30, 2007 22:47

Hello

Seems to work in IE 7 only , since it has a height it has haslayout , a set height usually gets you in trouble with FF OP

z index negative FF don't likes that

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" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- saved from url=(0022)http://www.domain.com/ -->
<style type="text/css">
html,body{height:100&#37;;}

*{padding:0;margin:0;}

#cover {
width: 100%;
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
background: Black;
filter:alpha(opacity=30); -moz-opacity:.30;opacity:.30; -khtml-opacity:.30; 
z-index: 3;
color:#ffffff;
}
</style>
	<script type="text/javascript">

	</script>
</head>
<body>
<div id="cover"><p>12345</p></div>

</body>
</html>

**phpster** · Aug 31, 2007 06:15

It works correctly in FF and in OP...its only the opacity in IE that is messed up

**tdave00** · Aug 31, 2007 20:24

This is all I ever use.

opacity: .75; -moz-opacity; 0.75;
filter: alpha(opacity=75);

I believe filter: alpha is specific to ie, so I just put both in there.