Internet Explorer 6 και select box z-index

Ίσως αρκετοί από εσάς να γνωρίζετε ένα bug του Internet Explorer 6, στο οποίο ένα html select εμφανίζεται πάνω από οτιδήποτε, χωρίς να διαβάζει το z-index που του δίνεται. Π.χ. εμφανίζεται ένα div δυναμικά στη σελίδα, αλλά το select εξακολουθεί να βρίσκεται πάνω από το div. Το πρόβλημα βρίσκεται στο ότι το εν λόγω element δεν είναι html element αλλά είναι στην ουσία το select box που χρησιμοποιούν τα windows μέσα από το win32 api.

Πώς λοιπόν μπορούμε να λύσουμε αυτό το πρόβλημα; Χρησιμοποιώντας το ίδιο bug, που ισχύει και για το iframe. Στην ουσία δηλαδή ένα iframe τοποθετείται κάτω από το div και αποκρύπτει το προβληματικό select box. Χρειαζόμαστε όμως ακόμα ένα div το οποίο θα περιέχει το div το οποίο θέλουμε να δείξουμε.

Ακολουθώντας το παράδειγμα της εικόνας, αν έχουμε το:

<div class = "mydiv">
  Περιεχόμενο, για να δούμε θα εμφανιστεί από πάνω;
</div>

θα πρέπει να το κάνουμε:

<div class = "wrapper">
<div class = "mydiv">
  Περιεχόμενο, για να δούμε θα εμφανιστεί από πάνω;
</div>
<!--[if lte IE 6.5]><iframe></iframe><![endif]-->
</div>

Αυτό που χρήζει προσοχής είναι το conditional include που γίνεται έτσι ώστε το iframe να εμφανίζεται μόνο στον IE 6 και κάτω. Γενικά με αυτόν τον τρόπο μπορεί κανείς να εισάγει κώδικα, όπως css ή οτιδήποτε άλλο, που προορίζεται μόνο για τον IE6 και κάτω.

Τώρα ήρθε η ώρα για να κάνει την δουλειά το css. Έχουμε λοιπόν:

div.wrapper {
    position: absolute;
    left:     5px;
    top:      5px;
    z-index:  10;
    overflow: hidden;
    width:      288px;
  height:     108px;
}

div.wrapper iframe {
    display:    block;
    top:        0px;
    left:       0px;
    z-index:    -1;
    filter:     mask();
  width:      288px;
  height:     108px;
}

div.mydiv {
    position:         absolute;
    left:             0px;
    top:              0px;
    background-color: #EEEEEE;
    border:           4px outset #004080;
    width:            280px;
    height:           100px;
}

Αυτό που πρέπει να προσέξει κανείς είναι τo filter:mask(); που είναι συγκεκριμένο για τον internet explorer και ενεργοποιεί την μηχανή rendering του ActiveX, καθώς επίσης και ότι το width & height είναι λίγο μεγαλύτερα για να συμπεριλάβουν το περιθώριο που έχει τεθεί στο αρχικό div.

Αυτά, ελπίζω ο κώδικάς μου να σας βοήθησε να λύσετε γρήγορα το πρόβλημά σας ή να σας έλυσε τυχόν απορίες.