All In One Script



PHP,HTLM,CSS,Jquery,AJAX,Javascript and etc doubts and sample codes

  • Home
  • Javascript
  • PHP
  • CSS
  • SQL/MYSQL

Solve the select Overlap bug in IE6

by Blogger 4:12:00 AM CSS html-select IE6 internet-explorer-6 Overlap

Solve the select Overlap bug in IE6


When using IE, you cannot put an absolutely positioned div over a select input element. That's because the select element is considered an ActiveX object and is on top of every HTML element in the page.
I already saw people hiding selects when opening a popup div, that leads to pretty bad user experience having controls disappearing.
FogBugz actually had a pretty smart solution (before v6) of turning every select into text boxes when a popup was displayed. This solved the bug and tricked the user eye but the behavior was not perfect.
Another solution is in FogBugz 6 where they no more use the select element and recoded it everywhere.
Last solution I currently use is messing up the IE rendering engine and force it to render the absolutely positioned <div> as an ActiveX element too, ensuring it can live over a select element. This is achieved by placing an invisible <iframe> inside the <div> and styling it with:
#MyDiv iframe
{
    position: absolute;
    z-index: -1;
    filter: mask();
    border: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 9999px;
    height: 9999px;
    overflow: hidden;
}
Does anyone have an even better solution than this one?
EDIT: The purpose of this question is as much informative as it is a real question. I find the <iframe>trick to be a good solution, but I am still looking for improvement like removing this ugly useless tag that degrades accessibility.

Answer :


I don't know anything better than an Iframe
But it does occur to me that this could be added in JS by looking for a couple of variables
  1. IE 6
  2. A high Z-Index (you tend to have to set a z-index if you are floating a div over)
  3. A box element
Then a script that looks for these items and just add an iframe layer would be a neat solution
Paul

source:http://stackoverflow.com/questions/7937/solve-the-select-overlap-bug-in-ie6





READ MORE
SHARE :

Search This Blog

Followers

  • Popular
  • Recent
  • Comments
    How to avoid Java code in JSP files?
    Why does this code using random strings print “hello world”?
    How to efficiently iterate over each Entry in a Map?
    In Java, difference between default, public, protected, and private
    Insert into … values ( SELECT … FROM … )
    What's the difference between INNER JOIN, LEFT JOIN, RIGHT JOIN and FULL JOIN?
    mysqli_fetch_array()/mysqli_fetch_assoc()/mysqli_fetch_row() expects parameter 1 to be resource or mysqli_result, boolean given
    How can I transition height: 0; to height: auto; using CSS?
    Event binding on dynamically created elements?
    Length of a JavaScript object

Instagram

About

Popular Posts

  • How to avoid Java code in JSP files?
    How to avoid Java code in JSP files? I'm new to Java EE and I know that something like the following three lines <%= x + 1 %...
  • Why does this code using random strings print “hello world”?
    Why does this code using random strings print “hello world”? The following print statement would print "hello world". Could a...
  • How to efficiently iterate over each Entry in a Map?
    How to efficiently iterate over each Entry in a Map? If I have an object implementing the  Map  interface in Java and I wish to iterate...
  • In Java, difference between default, public, protected, and private
    In Java, difference between default, public, protected, and private In Java , are there clear rules on when to use each of access modifi...
  • Insert into … values ( SELECT … FROM … )
    Insert into … values ( SELECT … FROM … ) I am trying to insert into a table using the input from another table. Although this is entire...
  • What's the difference between INNER JOIN, LEFT JOIN, RIGHT JOIN and FULL JOIN?
    What's the difference between INNER JOIN, LEFT JOIN, RIGHT JOIN and FULL JOIN?  What's the difference between  INNER JOIN ,  LEF...
  • mysqli_fetch_array()/mysqli_fetch_assoc()/mysqli_fetch_row() expects parameter 1 to be resource or mysqli_result, boolean given
    mysqli_fetch_array()/mysqli_fetch_assoc()/mysqli_fetch_row() expects parameter 1 to be resource or mysqli_result, boolean given I am tr...
  • How can I transition height: 0; to height: auto; using CSS?
    How can I transition height: 0; to height: auto; using CSS? I am trying to make a  <ul>  slide down using CSS transitions. The ...
  • Event binding on dynamically created elements?
    Event binding on dynamically created elements? I have a bit of code where I am looping through all the select boxes on a page and bindi...
  • Length of a JavaScript object
    Length of a JavaScript object If I have a JavaScript object, say var myObject = new Object (); myObject [ "firstname" ] ...

statcounter



statcounter



Template Created By ThemeXpose & Blogger Templates