• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

z-index IE8

T

till925a

Neues Mitglied
Hallo,

Ich habe eine Frage. Ich arbeite im Moment an einer Webseite und habe als Navigation ein vertikales Menü erstellt und unter einem Punkt ein Untermenü.
Dieses Untermenü soll über allen div Fenstern angezeigt werden. Dies kann man meines Wissens nach nur mit dem z-index verwirklichen. Nun funktioniert das auch unter FF, safari usw. bloß der IE (bei mir in der Version 8 macht mal wieder Probleme.
Ich habe mich schon bei google und im Forum diverse Stunden auf Fehlersuche begeben aber alle angebotenen Lösungen haben nicht zum gewünschten Erfolg geführt.
Ich poste mal meinen code und hoffe das mir vielleicht kann mal jemand rüberschauen und findet mein Fehler.
Nach Stundenlangem raufschauen sieht man ja manchmal den Wald vor lauter Bäumen nicht. :)


HTML

Code: 
<body>
        <div id="kopfzeile">
            <div id="kopfzeile_links">
                <img src="">
            </div>


            <div id="kopfzeile_rechts">
                <img src="">
                <p>
                Meisterbetrieb<br>
                der<br>
                Elektro-Innung
                </p>
            </div>


            <p id="ueberschrift">
            <br>
            Dienstleistungen für Datennetze<br> 
             und<br> 
            Kommunikationsanlagen<br>
            </p>
            <hr />
            <p id="unterschrift">
               Elektrotechnikermeisterbetrieb

            </p>
        </div>


        <div id="navigation">
            <hr />

            <ul class="menu" id="button_startseite">
                  <li><a href="startseite.html" class="active" class="text"><span>Startseite</span></a></li>
            </ul>
            <ul class="menu">        
                  <li><a href="qualifikationen.html" class="text"><span>Qualifikationen</span></a></li>
            </ul>
            <ul class="menu">
                  <li><a href="leistungen.html" class="text"><span>Leistungen</span></a>
                    <ul id="subnav_ul">
                        <li id="subnav"><a href="#">Alarmanlagen</a></li>
                        <li id="subnav"><a href="#">Antennenanlagen</a></li>
                        <li id="subnav"><a href="#">Beleuchtung</a></li>
                        <li id="subnav"><a href="#">Datennetze</a></li>
                        <li id="subnav"><a href="#">Digitalstrom</a></li>
                        <li id="subnav"><a href="#">Elektro-Notdienst</a></li>
                        <li id="subnav"><a href="#">KNX</a></li>
                        <li id="subnav"><a href="#">LWL-Spleißarbeiten</a></li>
                        <li id="subnav"><a href="#">Reparaturen</a></li>
                    </ul></li>
            </ul>
            <ul class="menu">
                  <li><a href="kontakt.html" class="text"><span>Kontakt</span></a></li>
            </ul>
            <ul class="menu">
                  <li><a href="impressum.html" class="text"><span>Impressum</span></a></li>
            </ul>
        </div>


        <div id="hauptseite">
            <img src="">
            <img src="">
            <img src="">
            <img src="">    
            <img src="">    
            <br><br><br><br><br><br>
            <img src="">    
            <br><br><br><br><br><br>
            <img src="">
            <br><br><br><br><br><br>    
            <img src="">            
        </div>

        
        <div id="fusszeile">
            <div id="text_fusszeile_links">
            <p>
            Gartenweg 12<br>    
                   19417 Klein Labenz
            </p>
            </div>

            <div id="text_fusszeile_rechts">
                <p>
                <table>
                    <tr><td>Tel.:</td><td>038482/60427</td></tr>
                    <tr><td>Mobil.:</td><td>0171/3618445</td></tr>
                    <tr><td>Fax :</td><td>038482/62576</td></tr>
                    <tr><td>E-Mail:</td><td><a href="kontakt.html">[email protected]</a></td></tr>
                </table>
                </p>
            </div>

        </div>

    </body>

CSS

Code: 
html, body{
position:absolute;
z-index:-10;
height:100%;
width:100%;
background-image:url(images/hintergrund_body.jpg);
background-attachment: fixed; <-- nicht wiederholen/kacheln 
background-repeat: no-repeat;  <--  scrollt nicht mit   
background-position: 100% 100%; <-- strecken auf 100%  
}

#kopfzeile{
position:absolute;
margin-left:50px;
margin-top:50px;
width:1100px;
height:160px;background: -moz-linear-gradient(left, #058aff 39%, #0f17ff 80%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(39%,#058aff), color-stop(80%,#0f17ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #058aff 39%,#0f17ff 80%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #058aff 39%,#0f17ff 80%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #058aff 39%,#0f17ff 80%); /* IE10+ */
background: linear-gradient(to right, #058aff 39%,#0f17ff 80%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#058aff', endColorstr='#058aff',GradientType=1 ); /* IE6-8 */
}

#kopfzeile hr{
width:500px;
color:white;
height:2px;
background-color:#ffffff;
}

#kopfzeile_links{
float:left;
width:200px;
height:150px;
}

#kopfzeile_links img{
width:160px;
height:150px;
margin-left:40px;
}

#ueberschrift{
text-align:center;
font-family:georgia;
font-size:large;
color:#ffffff;
}

#unterschrift{
text-align:center;
font-family:georgia;
font-style:italic;
color:#ffffff;
}

#kopfzeile_rechts{
float:right;
width:100px;
height:150px;
}

#kopfzeile_rechts img{
margin-top:20px;
margin-left:25px;
height:50px;
width:50px;
}

#kopfzeile_rechts p{
color:white;
font-size:small;
text-align:center;
}

#navigation{
z-index:5;
position:absolute;
margin-left:50px;
margin-top:209px;
float:left;
width:200px;
height:530px;
background: -moz-linear-gradient(top, #1e5799 0%, #058aff 0%, #058aff 30%, #0f17ff 93%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(0%,#058aff), color-stop(30%,#058aff), color-stop(93%,#0f17ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#058aff 0%,#058aff 30%,#0f17ff 93%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#058aff 0%,#058aff 30%,#0f17ff 93%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#058aff 0%,#058aff 30%,#0f17ff 93%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#058aff 0%,#058aff 30%,#0f17ff 93%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#058aff', endColorstr='#0f17ff',GradientType=0 ); /* IE6-8 */
}

#navigation hr{
width:150px;
background-color:black; 
height:3px;
}


.menu{
float:right; 
margin-top:10px; 
padding:0; 
list-style:none;
background:rgb(255,255,255); 
width:150px;
}

.menu li{
padding:0; 
margin:0 0 0px 0; 
height:40px; 
display:block;
}

.menu li .text, .active {
text-align:left;
height:40px; 
padding:0px 25px; 
font:16px Verdana, Arial, Helvetica, sans-serif; 
color:#ffffff; 
display:block; 
background:url('images/verMenuImages.png') 0px 0px no-repeat; 
text-decoration:none;
}

.menu li a:hover{
background:url('images/verMenuImages.png') 0px -40px no-repeat;
 color:rgb(0,0,0);
}

.menu li a.active, .menu li a.active:hover{
background:url('images/verMenuImages.png') 0px -80px no-repeat; 
color:rgb(255,255,255);
}

.menu li a span{
line-height:40px;
}

#button_startseite{
margin-top:80px;
}

.menu li ul{
display:none; 
position:fixed;
}

.menu li:hover ul {
display:block;
}

.menu li ul li{
list-style:none; 
width:150px; 
text-align:left;
height:30px; 
padding-left:10px; 
padding-top:10px; 
font:12px Verdana, 
Arial, Helvetica, sans-serif; 
color:rgb(255,255,255); 
background:url('images/verMenuImages.png') 0px 0px no-repeat;
 text-decoration:none;
}

.menu li ul li:hover{
background:url('images/verMenuImages.png') 0px -40px no-repeat; 
color:rgb(0,0,0);
}

.menu li ul li a{
color:#ffffff; 
text-decoration:none;
}

#subnav_ul{
position:relative; 
link:#ffffff;
}

#hauptseite{
position:absolute;
z-index:2;
height:510px;
width:890px;
float:left;
background-color:#EAEABA;
margin-top:220px;
margin-left:260px;
margin-bottom:10px;
background-image:url(images/hintergrund.jpg);
}

#hauptseite img{
width:100px;
height:100px;
filter:alpha(opacity=50); /* IE */
opacity:0.5; /* allgemein */
-moz-opacity:0.5; /* Mozilla */
-khtml-opacity:0.5; /* KTHML */
-opera-opacity:0.5; /* Opera */
float:right;
margin-top:10px;
margin-right:10px;
}

#fusszeile{
z-index:-2;
position:absolute;
margin-left:50px;
margin-top:738px;
float:left;
width:1100px;
height:120px;
background: -moz-linear-gradient(left, #0f17ff 24%, #058aff 83%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(24%,#0f17ff), color-stop(83%,#058aff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #0f17ff 24%,#058aff 83%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #0f17ff 24%,#058aff 83%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #0f17ff 24%,#058aff 83%); /* IE10+ */
background: linear-gradient(to right, #0f17ff 24%,#058aff 83%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f17ff', endColorstr='#0f17ff',GradientType=1 ); /* IE6-8 */
font-family:cursive;
font-size:small;
}

#text_fusszeile_links{
margin-left:550px;
margin-top:15px;
float:left;
color:#ffffff;
}

#text_fusszeile_rechts{
margin-right:30px;
float:right;
color:#ffffff;
}

#text_fusszeile_rechts a:visited{
color:grey;
}

#text_fusszeile_rechts a:link{
color:red;
}
 
Da Du jeglichen Bereich absolut positionierst ist eine Antwort hierauf durchaus schwierig zu finden. Du müsstest zunächst mal die Seite so umbauen, dass Du nicht alles absolut positionierst. Einzig das Aufklappmenü macht absolut positioniert Sinn.

Und hier ist auch das zweite Problem was offenbar die Ursache für deine Frage ist: du positionierst das Aufklappmenü fixiert und ohne z-index.

Außerdem ist das was Du hast im HTML-Code nicht wirklich ein Menü. Semantisch gesehen hast Du mehrere Menüs, die meisten nur mit einem Menüpunkt. Das würde ich dir raten zu einem richtigen Menü mit einem einzigen <ul> und darunter gegliederten <li>'s umzubauen.
 
Vielen dank erst mal für die schnelle Antwort.
Also ich habe den Quellcode jetzt mal nach deinen Vorschlägen umgearbeitet und mit den Listen ist es erstmal sehr viel übersichtlicher.
Aber das Problem besteht leider immer noch.
Hast du noch weitere Vorschläge?

so sieht es jetzt aus



Code: 
<head>
        <link rel="stylesheet" type="text/css" href="formate.css">


    </head>
    <body>
        <div id="kopfzeile">
            <div id="kopfzeile_links">
                <img src="images/logo.jpg">
            </div>


            <div id="kopfzeile_rechts">
                <img src="images/LOGO_meisterbetrieb.jpg" title="E-Check">
                <p>
                Meisterbetrieb<br>
                der<br>
                Elektro-Innung
                </p>
            </div>


            <p id="ueberschrift">
            Dienstleistungen für Datennetze<br> 
             und<br> 
            Kommunikationsanlagen<br>
            </p>
            <hr />
            <p id="unterschrift">
               Elektrotechnikermeisterbetrieb

            </p>
        </div>


        <div id="navigation">
            <hr />

            <ul class="menu">
                  <li id="button_startseite"><a href="startseite.html" class="active" class="text"><span>Startseite</span></a></li>
    
                  <li><a href="qualifikationen.html" class="text"><span>Qualifikationen</span></a></li>

                  <li><a href="leistungen.html" class="text"><span>Leistungen</span></a>
                    <ul>
                        <li id="subnav"><a href="#">Alarmanlagen</a></li>
                        <li id="subnav"><a href="#">Antennenanlagen</a></li>
                        <li id="subnav"><a href="#">Beleuchtung</a></li>
                        <li id="subnav"><a href="#">Datennetze</a></li>
                        <li id="subnav"><a href="#">Digitalstrom</a></li>
                        <li id="subnav"><a href="#">Elektro-Notdienst</a></li>
                        <li id="subnav"><a href="#">KNX</a></li>
                        <li id="subnav"><a href="#">LWL-Spleißarbeiten</a></li>
                        <li id="subnav"><a href="#">Reparaturen</a></li>
                    </ul></li>


                  <li><a href="kontakt.html" class="text"><span>Kontakt</span></a></li>
 
                <li><a href="impressum.html" class="text"><span>Impressum</span></a></li>
            </ul>
        </div>


        <div id="hauptseite">
            <img src="images/4.jpg">
            <img src="images/DCP_0002.JPG">
            <img src="images/DCP_0003.JPG">
            <img src="images/DCP_0005.JPG">    
            <img src="images/DCP_0006.JPG">    
            <br><br><br><br><br><br>
            <img src="images/DCP_0007.JPG">    
            <br><br><br><br><br><br>
            <img src="images/5.JPG">
            <br><br><br><br><br><br>    
            <img src="images/DCP_0001.JPG">            
        </div>

        
        <div id="fusszeile">
            <div id="text_fusszeile_links">
            <p>
            Gartenweg 12<br>    
                   19417 Klein Labenz
            </p>
            </div>

            
            <div id="text_fusszeile_rechts">
                <p>
                <table>
                    <tr><td>Tel.:</td><td>038482/60427</td></tr>
                    <tr><td>Mobil.:</td><td>0171/3618445</td></tr>
                    <tr><td>Fax :</td><td>038482/62576</td></tr>
                    <tr><td>E-Mail:</td><td><a href="kontakt.html">[email protected]</a></td></tr>
                </table>
                </p>
            </div>

        </div>



    </body>


Code: 
html, body{
position:relative;
z-index:-10;
height:100%;
width:100%;
background-image:url(images/hintergrund_body.jpg);
background-attachment: fixed; <-- nicht wiederholen/kacheln 
background-repeat: no-repeat;  <--  scrollt nicht mit   
background-position: 100% 100%; <-- strecken auf 100%  
}

#kopfzeile{
position:relative;
margin-left:50px;
margin-top:50px;
width:1100px;
height:160px;background: -moz-linear-gradient(left, #058aff 39%, #0f17ff 80%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(39%,#058aff), color-stop(80%,#0f17ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #058aff 39%,#0f17ff 80%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #058aff 39%,#0f17ff 80%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #058aff 39%,#0f17ff 80%); /* IE10+ */
background: linear-gradient(to right, #058aff 39%,#0f17ff 80%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#058aff', endColorstr='#058aff',GradientType=1 ); /* IE6-8 */
}

#kopfzeile hr{
width:500px;
color:white;
height:2px;
background-color:#ffffff;
}

#kopfzeile_links{
float:left;
width:200px;
height:150px;
}

#kopfzeile_links img{
width:160px;
height:150px;
margin-left:40px;
}

#ueberschrift{
text-align:center;
font-family:georgia;
font-size:large;
color:#ffffff;
}

#unterschrift{
text-align:center;
font-family:georgia;
font-style:italic;
color:#ffffff;
}

#kopfzeile_rechts{
float:right;
width:100px;
height:150px;
}

#kopfzeile_rechts img{
margin-top:20px;
margin-left:25px;
height:50px;
width:50px;
}

#kopfzeile_rechts p{
color:white;
font-size:small;
text-align:center;
}

#navigation{
z-index:5;
position:relative;
margin-left:50px;
float:left;
width:200px;
height:530px;
background: -moz-linear-gradient(top, #1e5799 0%, #058aff 0%, #058aff 30%, #0f17ff 93%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(0%,#058aff), color-stop(30%,#058aff), color-stop(93%,#0f17ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#058aff 0%,#058aff 30%,#0f17ff 93%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#058aff 0%,#058aff 30%,#0f17ff 93%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#058aff 0%,#058aff 30%,#0f17ff 93%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#058aff 0%,#058aff 30%,#0f17ff 93%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#058aff', endColorstr='#0f17ff',GradientType=0 ); /* IE6-8 */
}

#navigation hr{
width:150px;
background-color:black; 
height:3px;
}


.menu{
float:right; 
margin-top:10px; 
padding:0; list-style:none;
background:rgb(255,255,255); 
width:150px;
}

.menu li{
padding:0; 
margin:0 0 0px 0; 
height:40px; 
display:block;
}

.menu li .text, .active {
text-align:left;
height:40px; 
padding:0px 25px; 
font:16px Verdana, Arial, Helvetica, sans-serif; 
color:#ffffff; 
display:block;
 background:url('images/verMenuImages.png') 0px 0px no-repeat; 
text-decoration:none;
}

.menu li a:hover{
background:url('images/verMenuImages.png') 0px -40px no-repeat; 
color:rgb(0,0,0);
}

.menu li a.active, .menu li a.active:hover{
background:url('images/verMenuImages.png') 0px -80px no-repeat; 
color:rgb(255,255,255);
}

.menu li a span{
line-height:40px;
}

#button_startseite{
margin-top:80px;
}

.menu li ul{
display:none; 
position:absolute; 
link:#ffffff; 
z-index:5;
}

.menu li:hover ul {
display:block;
}

.menu li ul li{
list-style:none; 
width:150px; 
text-align:left;
height:30px; 
padding-left:10px; 
padding-top:10px; 
font:12px Verdana, Arial, Helvetica, sans-serif; 
color:rgb(255,255,255); 
background:url('images/verMenuImages.png') 0px 0px no-repeat; 
text-decoration:none;
}

.menu li ul li:hover{
background:url('images/verMenuImages.png') 0px -40px no-repeat; 
color:black;
}

.menu li ul li a{
color:#ffffff; 
text-decoration:none;
}


#hauptseite{
position:relative;
z-index:2;
height:510px;
width:890px;
float:left;
background-color:#EAEABA;
margin-top:10px;
margin-left:10px;
margin-bottom:10px;
background-image:url(images/hintergrund.jpg);
}

#hauptseite img{
width:100px;
height:100px;
filter:alpha(opacity=50); /* IE */
opacity:0.5; /* allgemein */
-moz-opacity:0.5; /* Mozilla */
-khtml-opacity:0.5; /* KTHML */
-opera-opacity:0.5; /* Opera */
float:right;
margin-top:10px;
margin-right:10px;
}

#fusszeile{
z-index:-2;
position:relative;
margin-left:50px;
float:left;
width:1100px;
height:120px;
background: -moz-linear-gradient(left, #0f17ff 24%, #058aff 83%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(24%,#0f17ff), color-stop(83%,#058aff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #0f17ff 24%,#058aff 83%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #0f17ff 24%,#058aff 83%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #0f17ff 24%,#058aff 83%); /* IE10+ */
background: linear-gradient(to right, #0f17ff 24%,#058aff 83%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f17ff', endColorstr='#0f17ff',GradientType=1 ); /* IE6-8 */
font-family:cursive;
font-size:small;
}

#text_fusszeile_links{
margin-left:550px;
margin-top:15px;
float:left;
color:#ffffff;
}

#text_fusszeile_rechts{
margin-right:30px;
float:right;
color:#ffffff;
}

#text_fusszeile_rechts a:visited{
color:grey;
}

#text_fusszeile_rechts a:link{
color:red;
}
 
Wenn Du jetzt ...

... beim body die relative Positionierung und den z-index wegnimmst (ist dort überhaupt nicht notwendig) ...
... deinem HTML-Code einen Doctype gegeben hast ..
... diese halben Kommentare im CSS-Code entfernst ..

.. sollte es theoretisch klappen. Wenn nicht, wäre ein Link zur betroffenen Seite sicherlich hilfreich.
 
Hab keinen IE hier, bei mir sieht es ok aus. Aber ich hab noch eine Vermutung was das Problem sein könnte. Gib .menu li mal noch "position: relative;z-index: 2;" und dem Untermenü dann neben der absoluten Positionierung auch noch eine Position mittels "top: 0;left: 0;" oder ähnlich.

Außerdem hast Du noch einige Schnitzer im HTML-Code, die aber für das Menüproblem keine Rolle spielen:
[Invalid] Markup Validation of http://testseite925a.funpic.de/ - W3C Markup Validator
 
Wenn nur jeder keinen IE hätte. ;-) also ich habe erst mal den anderen Spass berichtig. Danke dafür. Hab deine Vorschläge auch so mit eingearbeitet aber unter IE 8 immer noch das selbe Problem. Ich irgendwie greifen der z-index nicht obwohl ich ihn auch versucht habe in der Richtigen ebene einzutragen weil das ja für den IE in älteren Versionen wichtig ist. merkwürdig ist auch das der schmale Streifen vom hintergrund sich ebenfalls vor das Untermenue schiebt weshalb ich da zu beginn auch den z-index mit angewendet hatte. Das ist alles gar nicht so einfach. :(
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben