Member Avatar for acplayer

I am having a problem with a select that is showing thru an opaque div. See attached image(sorry, but this is an internal client app and I cannot show more).

The blue horizontal line on top is the edge of DIV that I am displaying containing the text you see. The DIV has a FILTER with opacity of 100. The little select box with a number is part of the HTML page that is below the DIV. This is the little select that the DISPLAY:TABLE element uses to implement page breaks.

The second attached file has a screen shot from IE developer of the DIV that forms the modal dialog which should be on top of the select.

Anybody have ideas on how to move forward. This application is IE only.

ScreenHunter_02_Jul._07_10_.10_.gif 7.33 KB ScreenHunter_03_Jul._07_10_.15_.gif 14.59 KB
  • 2 Contributors
  • 2 Replies
  • 139 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by acplayer
Member Avatar for acplayer

It's a well known IE bug.
You can see how to fix it at http://www.javascriptjunkie.com/?p=5 and http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx.
If your using jquery -- http://docs.jquery.com/Plugins/bgiframe.

Thanks much. I was able to get it to work using all JavaScript to create and dispose of the iFrame. However, an observation that I did not see captured in any of the discussions.

In my case I had a DIV that contained only a table and the table could have different sizes depending on the data. We use a fadein effect to get the DIV to display as well. Anyway, the comment-- I had to make sure to resize the iFrame after the call to the fadein code (which turns on the display of the DIV) so that the DIV element has the correct size. Before the fadein code, I was consistently getting the div height and width as zero.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.