468,244 Members | 1,827 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,244 developers. It's quick & easy.

Problem with Opacity in IE

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
1 1345
drhowarddrfine
7,435 Expert 4TB
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.

Similar topics

12 posts views Thread by Joseph Misko | last post: by
2 posts views Thread by manu3d | last post: by
15 posts views Thread by Sunny | last post: by
16 posts views Thread by Mathieu Maes | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.