<div> Container über <select> Boxen legen

Zergling-new · 06.03.2007, 15:56

Hallo,
welche Hacks gibt es, um <div> Container im MSIE 6 oder älter über eine <select> Box zu legen, ohne dass diese "durchscheint".

Ausblenden mittels "position:relative" und die Position ins Nirvana verschieben kenne ich. Das ganze temporär durch eine Grafik zu ersetzen finde ich nicht gut, wer weiß schon wie die <select> Box beim User wirklich aussieht (Windows-Styles). <select> selber durch DHTML simulieren gefällt mir auch nicht.

Es soll wohl einmal den Hack gegeben haben, die <select> Box in einen <iframe> zu legen, der funktioniert leider auch nicht, zumindest nicht bei meinem Test-Versuch.

Ideen oder Schlagwörter für Google?

Danke & Gruß, c

KingCrunch · 06.03.2007, 16:16

Versteh so gesehen das Problem nicht ^^

Zergling-new · 06.03.2007, 16:48

Eine <select> Box kann im Internet Explorer 6 nicht durch einen <div> Container überlagert werden.

Konkret taucht das ganze auf einer Formularseite auf, dessen Navigation mit verschachtelten aufklappbaren Menüs arbeitet. Legt sich ein Menü-Container nun über eine <select> Box, ist die <select> Box dahinter sichtbar.

Ähnliches mit Flash-Filmen, weiß nicht ob das dort aber noch aktuell ist.

Screenshot:
http://www.bilder-hosting.de/show/UJ6IJ.html

Zumindest das hier klappt:

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    
    
    <style type="text/css">
        div.unscheinbar,
        iframe.unscheinbar {
        	position   : absolute;
            left       : 5px;
            top        : 5px;
            height     : 50px;
            width      : 50px;
            background : red;
            z-index    : 10;
        }
        
        iframe.unscheinbar {
        	border  : 0;
            padding : 0;
            margin  : 0;
        	z-index : 1;
        }
        
        div.unscheinbar {
        	background : green;
        }
    </style>
    
    <script type="text/javascript">
        
    </script>
</head>
<body>

    <form action="">
        <select>
            <option>eins zwei</option>
        </select>
    </form>
    
    <iframe src="about:blank" class="unscheinbar"></iframe>
    
    <div class="unscheinbar"></div>

</body>
</html>

phpdummi · 06.03.2007, 18:40

also ne lösung gibts. ich such mal

Zergling-new · 06.03.2007, 18:47

Die Lösung ist, hinter den <ul> oder[list=1] Tag dynamisch einen <iframe> zu klemmen. Garnicht so einfach, da das Element nicht aus dem Textfluß genommen werden darf (sonst zerstört es die Listen-Darstellung).

Ich präsentiere das Ergebnis, falls es ein akzeptables gibt dann demnächst hier.

phpdummi · 06.03.2007, 18:55

also das was auf dem screenshot zu sehen ist gefällt mir schonmal richtig gut.

Zergling-new · 07.03.2007, 14:26

Folgende Funktion habe ich heute geschrieben.
Sie wird nicht auf Anhieb bei euch funktionieren, ihr müsst das Prinzip verstanden haben und die Funktion entsprechend anpassen.
Sorry für das Englisch:

Code:

/*
 * A "windowed control" object is an object (<select> box, active-x element, ..)
 * that can not overlaid by a <div> layer. It shine's through.
 * This bug occures in Microsoft's Internet Explorer, Version 6.
 * An <iframe> can overlay such windowed controls.
 * So if you have a dynamic menu with <div> layers that might overlap
 * a windowed control, call this function to place an <iframe> under the
 * layer. You need to have an <iframe src> file with some CSS code, to get off
 * the <iframe>'s border (othervise we could use "about:blank"). So use the
 * CSS code (margin|padding|border:0).
 * But in the end, we should never see this <iframe>!
*/ 
function fixWindowedControl(winCtrlId)
{
    /*
    // replaces a following code
    
    <ul id="fixWinCtrl-ul-123">[*]eins[*]zwei 2
zwei 22
zwei 222[*]drei[/list]    
    // into this one by manipulating the DOM structure
   
    <div style="position:relative">
        <div style="absolute;z-index:1">
            <iframe scrolling="no" src="test7-iframe.html" style="padding:0;border:0;visibility:hidden" id="fixWinCtrl-div-123"></iframe>
        </div>
    
        <div style="position:relative;z-index:2">
            
            <ul id="fixWinCtrl-ul-123">[*]eins[*]zwei 2
zwei 22
zwei 222[*]drei[/list]            
        </div>
    </div>
    
    // the effect is, that there is an iframe under the list now, so it
    // can hover over a <select> box (not possible with MSIE 6)
    */
    
    // get the <ul> object
    var winCtrl = document.getElementById(winCtrlId);
    
    // create the outer <div> container
	var div1  = document.createElement("DIV");
        div1.style.position ="relative";
    
    // create the first inner <div> <iframe> container    
    var div2a = document.createElement("DIV");
        div2a.style.position = "absolute";
        div2a.style.zIndex   = 1;
    
    // create the <iframe>
    var iframe2a = document.createElement("IFRAME");
        iframe2a.src              = "_test_protokoll_iframe.html"; // custom
        iframe2a.scrolling        = "no";
        iframe2a.style.padding    = "0";
        iframe2a.style.margin     = "-22px 0 0 163px"; // custom setting
        iframe2a.style.border     = "0";
        iframe2a.style.width      = winCtrl.offsetWidth;
        iframe2a.style.height     = winCtrl.offsetHeight;
        iframe2a.style.visibility = "hidden";
        iframe2a.id               = winCtrl.id.replace(/ul/, "div");
        
    // append the <iframe> to the <div> <iframe> container 
    div2a.appendChild(iframe2a);            
    
    // create the second inner <div> <ul> container
    var div2b = document.createElement("DIV");
        div2b.style.position = "relative";
        div2b.style.zIndex   = "2";
    
    // append the <ul> to the <div> <ul> container (use a clone, othervise it'll get lost)
    div2b.appendChild(winCtrl.cloneNode(true));
    
    // append the inner <div> containers to the outer <div> container
    div1.appendChild(div2a);
    div1.appendChild(div2b);
    
    // replace the <ul> with the new structure
    (winCtrl.parentNode).replaceChild(div1, winCtrl);
}

/*
 * collects all <ul> elements with an id like "*fixWinCtrl-ul-*" and processes
 * them with the above function fixWindowedControl() 
 */
function fixWindowedControls()
{
	var unsortedLists = document.getElementsByTagName("UL");
    for (var i = 0; i < unsortedLists.length; i++) {
    	if (unsortedLists[i].id.indexOf("fixWinCtrl-ul-") != -1) {
    		fixWindowedControl(unsortedLists[i].id);
    	}
    }
}

/*
 * do we need to fix the bug?
 */
var doFixWindowedControls = (BrowserDetect.browser == "Explorer" && BrowserDetect.version <= 6);

/*
 * initiate after page load
 */
if (doFixWindowedControls && window.attachEvent) {
    window.attachEvent("onload", fixWindowedControls);
}

phpdummi · 07.03.2007, 14:47

hmmh .. is das wirklich okay so viel JS zu benutzen? ich mein, ich hab nix gegen JS aber viele firmen admins schalten das rigeros aus, ansonsten kommt man anscheinened nicht vom iframe weg

die idee das auszulagern ist natürlich klasse, ich bild mir aber nach wie vor ein ne lösung gehabt zu haben
*weitersuch*

Zergling-new · 07.03.2007, 15:11

Das ganze ist wirklich sehr schwerfällig - zu schwerfällig. Ein transparenter IFrame löst den Bug auch nicht auf.

Ich habe es jetzt beim Laden der Seite und on-the-fly probiert zu erstellen, jeweils böse Nebeneffekte.

Ich schau jetzt mal ob das gut wird, wenn ich den IFrame über den überlappenden Teil der <select> Box lege. Das ist dann halt sehr unflexibel.

phpdummi · 07.03.2007, 15:17

na wenn schon JS dann blende die select box beim überfahren der links einfach aus?!
->onmouseover->#box select {display:none;} is mir grad mal so in den sinn gekommen

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[CSS] Container in Container	Igäl	HTML, Usability und Barrierefreiheit	5	04.09.2007 11:29

06.03.2007, 15:56
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	<div> Container über <select> Boxen legen Hallo, welche Hacks gibt es, um <div> Container im MSIE 6 oder älter über eine <select> Box zu legen, ohne dass diese "durchscheint". Ausblenden mittels "position:relative" und die Position ins Nirvana verschieben kenne ich. Das ganze temporär durch eine Grafik zu ersetzen finde ich nicht gut, wer weiß schon wie die <select> Box beim User wirklich aussieht (Windows-Styles). <select> selber durch DHTML simulieren gefällt mir auch nicht. Es soll wohl einmal den Hack gegeben haben, die <select> Box in einen <iframe> zu legen, der funktioniert leider auch nicht, zumindest nicht bei meinem Test-Versuch. Ideen oder Schlagwörter für Google? Danke & Gruß, c


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

06.03.2007, 16:16
KingCrunch Erfahrener Benutzer Registriert seit: 13.08.2007 Beiträge: 1.976	Versteh so gesehen das Problem nicht ^^ __________________ Nicht jeder Fehler ist ein Bug.

06.03.2007, 18:40
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	also ne lösung gibts. ich such mal __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things

06.03.2007, 18:47
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Die Lösung ist, hinter den <ul> oder[list=1] Tag dynamisch einen <iframe> zu klemmen. Garnicht so einfach, da das Element nicht aus dem Textfluß genommen werden darf (sonst zerstört es die Listen-Darstellung). Ich präsentiere das Ergebnis, falls es ein akzeptables gibt dann demnächst hier.

06.03.2007, 18:55
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	also das was auf dem screenshot zu sehen ist gefällt mir schonmal richtig gut. __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things

07.03.2007, 14:47
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	hmmh .. is das wirklich okay so viel JS zu benutzen? ich mein, ich hab nix gegen JS aber viele firmen admins schalten das rigeros aus, ansonsten kommt man anscheinened nicht vom iframe weg die idee das auszulagern ist natürlich klasse, ich bild mir aber nach wie vor ein ne lösung gehabt zu haben weitersuch __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things

07.03.2007, 15:11
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Das ganze ist wirklich sehr schwerfällig - zu schwerfällig. Ein transparenter IFrame löst den Bug auch nicht auf. Ich habe es jetzt beim Laden der Seite und on-the-fly probiert zu erstellen, jeweils böse Nebeneffekte. Ich schau jetzt mal ob das gut wird, wenn ich den IFrame über den überlappenden Teil der <select> Box lege. Das ist dann halt sehr unflexibel.

07.03.2007, 15:17
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	na wenn schon JS dann blende die select box beim überfahren der links einfach aus?! ->onmouseover->#box select {display:none;} is mir grad mal so in den sinn gekommen __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things