Solved

CSS lightbox opacity IE7 not working

Posted on 2007-03-22
1
3,224 Views
Last Modified: 2012-06-27
When visitor will arrive on website for first time, they will see a lightbox like
http://www.huddletogether.com/projects/lightbox2/
who show an help webpage and not only picture.

It works on FF, IE 6, Safari but not IE7, on IE7 opacity become 100%, the background is plain color and hide then website behind. I found some article speaking about:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader but it didn't works for me.

Here is my current css. Any idea on how to include the filter: progid:DXImageTransform.Microsoft.AlphaImageLoader to make this code working on IE7?

#overlay{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 90;
    width: 100%;
    height: 100%;

      background-color:#333333;
      -moz-opacity:.50;
      opacity:.50;
}

* html #overlay{
      background-color:#333333;
      filter:alpha(opacity=50);
}
0
Comment
Question by:mammouth
1 Comment
 
LVL 15

Accepted Solution

by:
stanscott2 earned 125 total points
ID: 18774985
You don't include the filter in your stylesheet.  Instead, you need to place it inside a DIV on your HTML, like this:

<DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
     src='image.png', sizingMethod='scale');" >
</DIV>

replacing 'image.png' with your own image.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Print Rhino Java Array in Javascript 1 40
How do I post more than 1 item to php backend 24 32
boostsrap 1 14
How do I wrap text in dialog window 6 9
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question