Solved

CSS lightbox opacity IE7 not working

Posted on 2007-03-22
1
3,222 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

Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

773 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