Hallo,
gleich vorweg, ich bin ziemlich angenervt gerade von diesem Mistding von IE. Den sollte man verbieten, der kommt ja mit gar nichts zurecht, wogegen Firefox selbst noch grobe Codingsfehler akzeptiert.
Es geht um den Z-Index. In Firefox klappt alles perfekt, in IE, geht gar nichts.
Hier mal in mein Code:
Und dazu noch die CSS:
Die #navi-button0x sollen eigentlich ganz vorne sein, damit bei MouseKontakt eine Funktion ausgeführt wird. In FF sind diese auch durch den Z-Index ganz vorne, nur bei IE ist eine Tabelle und das Bild vor dieser leeren DIV, die eben diese Funktionen ausführen soll.
Ich gab jedem Element auch eine Position, wie ich es schon nachgegooglet habe, aber auch das brachte nichts. Spielte zudem schon mit den Z-Index und gab denen auch mal nen höheren Wert, aber das alles führte nur dazu, dass es beinah in FF auch nicht mehr ging.
Gibt es hier keine Standardlösung, wie man das bzgl IE angehen muss, wenn Sachen überlappen?
Wäre um ein Exempel sehr dankbar, denn dieses Problem läuft mir immer wieder über den Weg und ich finde einfach keine Lösung, außer alles umzuschreiben, so dass es der IE auch schluckt, dafür aber mehr Traffic macht... -.-
Nebenbei noch: style="filter:alpha(opacity=60);-moz-opacity:0.6" nimmt der IE auch konsequent nicht an!
Boa, Microsoft sollte sich mal was von ihrer Konkurrenz abschauen,... bzw es auch so umsetzen und nicht nur abschauen, was das Design anbelangt....
Danke schonmal!
LG
Mikey
gleich vorweg, ich bin ziemlich angenervt gerade von diesem Mistding von IE. Den sollte man verbieten, der kommt ja mit gar nichts zurecht, wogegen Firefox selbst noch grobe Codingsfehler akzeptiert.
Es geht um den Z-Index. In Firefox klappt alles perfekt, in IE, geht gar nichts.
Hier mal in mein Code:
HTML:
<div id="header">
<div class="oneColFixCtr" id="slider-frame"><iframe src="home-slider.html" id="iframe-top" name="iframe-top" frameborder="0" scrolling="no"></iframe>
</div>
<div class="oneColFixCtr" id="navigation">
<div class="index" id="navi01">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Navi-Button01','','images/Button02.jpg',1)"><div class="index" id="navi-button01"></div></a>
<img src="images/Button01.jpg" name="Navi-Button01" width="106" height="30" id="Navi-Button01" />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Navi-Button02','','images/Button02.jpg',1),navi01_on()"><div class="index" id="navi-button02"></div></a>
<img src="images/Button01.jpg" name="Navi-Button02" width="104" height="30" id="Navi-Button02" />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Navi-Button03','','images/Button02.jpg',1),navi02_on()"><div class="index" id="navi-button03"></div></a>
<img src="images/Button01.jpg" name="Navi-Button03" width="88" height="30" id="Navi-Button03" />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Navi-Button04','','images/Button02.jpg',1),navi03_on()"><div class="index" id="navi-button04"></div></a>
<img src="images/Button01.jpg" name="Navi-Button04" width="88" height="30" id="Navi-Button04" />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Navi-Button05','','images/Button02.jpg',1),navi04_on()"><div class="index" id="navi-button05"></div></a>
<img src="images/Button01.jpg" name="Navi-Button05" width="114" height="30" id="Navi-Button05" />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Navi-Button06','','images/Button02.jpg',1),navi05_on()"><div class="index" id="navi-button06"></div></a>
<img src="images/Button01.jpg" name="Navi-Button06" width="80" height="30" id="Navi-Button06" />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Navi-Button07','','images/Button02.jpg',1),navi06_on()"><div class="index" id="navi-button07"></div></a>
<img src="images/Button01.jpg" name="Navi-Button07" width="80" height="30" id="Navi-Button07" />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Navi-Button08','','images/Button02.jpg',1)"><div class="index" id="navi-button08"></div></a>
<img src="images/Button01.jpg" name="Navi-Button08" width="122" height="30" id="Navi-Button08" />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Navi-Button09','','images/Button02.jpg',1)"><div class="index" id="navi-button09"></div></a>
<img src="images/Button01.jpg" name="Navi-Button09" width="84" height="30" id="Navi-Button09" />
</div>
<div class="index" id="navi02">
<table width="912" height="20" border="0" align="center" cellspacing="5">
<tr>
<td width="105" >Startseite</td>
<td width="102">Schriften</td>
<td width="85">Bilder</td>
<td width="85">Musik</td>
<td width="111">Über mich</td>
<td width="77">Shop</td>
<td width="77">Links</td>
<td width="118">Gästebuch</td>
<td width="84">Kontakt</td>
</tr>
</table>
</div>
</div>
<!-- end #header -->
</div>Und dazu noch die CSS:
HTML:
.index #header {
height: 380px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 20px;
}
.index #container #header #navigation {
width: 100%;
position: absolute;
right: 0px;
text-align: right;
height: 30px;
top: 0px;
}
.index #container #header #navigation #navi01 {
height: 30px;
width: 900px;
position: absolute;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
top: 0px;
right: 8px;
}
.index #container #header #navigation #navi02 table{
text-align: center;
position: absolute;
top: 0px;
color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size: 14px;
}
#navi-button01 {
position: absolute;
height: 28px;
width: 102px;
top: 0px;
z-index: 102;
left: 2px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#navi-button02 {
position: absolute;
height: 28px;
width: 100px;
top: 0px;
z-index: 1;
left: 112px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#navi-button03 {
position: absolute;
height: 28px;
width: 84px;
top: 0px;
z-index: 1;
left: 220px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#navi-button04 {
position: absolute;
height: 28px;
width: 84px;
top: 0px;
z-index: 1;
left: 312px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#navi-button05 {
position: absolute;
height: 28px;
width: 110px;
top: 0px;
z-index: 1;
left: 404px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#navi-button06 {
position: absolute;
height: 28px;
width: 76px;
top: 0px;
z-index: 1;
left: 522px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#navi-button07 {
position: absolute;
height: 28px;
width: 76px;
top: 0px;
z-index: 1;
left: 606px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#navi-button08 {
position: absolute;
height: 28px;
width: 118px;
top: 0px;
z-index: 1;
left: 690px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#navi-button09 {
position: absolute;
height: 28px;
width: 80px;
top: 0px;
z-index: 1;
left: 816px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}Die #navi-button0x sollen eigentlich ganz vorne sein, damit bei MouseKontakt eine Funktion ausgeführt wird. In FF sind diese auch durch den Z-Index ganz vorne, nur bei IE ist eine Tabelle und das Bild vor dieser leeren DIV, die eben diese Funktionen ausführen soll.
Ich gab jedem Element auch eine Position, wie ich es schon nachgegooglet habe, aber auch das brachte nichts. Spielte zudem schon mit den Z-Index und gab denen auch mal nen höheren Wert, aber das alles führte nur dazu, dass es beinah in FF auch nicht mehr ging.
Gibt es hier keine Standardlösung, wie man das bzgl IE angehen muss, wenn Sachen überlappen?
Wäre um ein Exempel sehr dankbar, denn dieses Problem läuft mir immer wieder über den Weg und ich finde einfach keine Lösung, außer alles umzuschreiben, so dass es der IE auch schluckt, dafür aber mehr Traffic macht... -.-
Nebenbei noch: style="filter:alpha(opacity=60);-moz-opacity:0.6" nimmt der IE auch konsequent nicht an!
Boa, Microsoft sollte sich mal was von ihrer Konkurrenz abschauen,... bzw es auch so umsetzen und nicht nur abschauen, was das Design anbelangt....
Danke schonmal!
LG
Mikey
