By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,694 Members | 1,846 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,694 IT Pros & Developers. It's quick & easy.

Problem with Opacity in IE

P: 7
Hi,

I tried an exaple for opacity like this,

*********************************[html]
<html>
<title></title>
<head>
<style>
.opac
{
height:100px;
width:100px;
border:1px solid red;
position:absolute;
left:100px;
top:100px;

filter:alpha(opacity=30);
-moz-opacity:.30;
opacity:.30;
}
#header
{
border:1px solid blue;
height:20px;
width:40px;
position:relative;
top:-10px;
left:5px;
background-color:#999999;
}
</style>
</head>

<body>
<div class="opac">
<div id="header" style="">Header</div>
</div>
</body>
</html>[/html]
************************

I am want to display the sub division like an header to the main div, but after applying the opacity for main div, the part which is out side the main div in sub div is disappearing. I am getting this problem in IE only. It is working fine in FireFox.

Could any one knows any solution regarding this, most welcome.
It will help me alot.
Thank you in advance.

Regards,
Jagadeesh.
Dec 14 '07 #1
Share this Question
Share on Google+
1 Reply


drhowarddrfine
Expert 5K+
P: 7,435
Apparently IE is having problems with its own 'filter'. I don't know what the problem is right now.

btw, there is no need to you -moz-opacity. Modern browsers work fine with the CSS property 'opacity'. Of course, IE doesn't.

EDIT: Perhaps this is due to IEs collapsing margins bug. I'll look into this later.
Dec 14 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.