16.08.2009, 15:25
|
|||
|
|||
IE verschiebt Navi Menü
Hi @all...
nach langem Kampf und autodidatkischem Lernen von CSS habe ich es eigentlich grundsätzlich geschaft meine Navi wie gewünscht aufzubauen. Selbst dem IE "wahtever:hover" beizubringen hat geklappt. Nun habe ich aber noch ein Probelm an dem ich langsam verzweifle und mir jeder weitere Lösungsansatz abhanden gekommen zu sein scheint. Firefox stellt meine Navi wie gewollt dar, der IE verschiebt die Navi am linken Rand jedoch über die Inhalte. Nun weiss ich nicht, ob Firefox etwas falsch macht und es dadurch richtig darstellt, oder aber der IE etwas verrmurxt. Folgende Seite dokumentiert mein Problem. Navigation linke Seite Die Menüs der unteren Ebene (unter Raumfahrt klappen Sie aus, unter Shuttle sind und sollen sie konstant zu sehen sein) überlagern im IE den Text des Inhalts... Alles probieren mit Padding, Margin & Co. haben mich nicht weiter gebracht. Was mich zusätzlich verwirrt ist, das auf folgernder Seite: ISS Navigation Links bei selben Code die Navi im IE hinter der swf Animation verschwindet. Langsam bin ich ja schon fast soweit zu sagen, das wenn ich diesen Effekt reproduzieren könnte wenn da Text steht ich damit leben könnte für den IE, wobei das natürlich auch keine wirkliche Lösung ist. Folgender Code liegt der Navi zu Grunde: Code:
#navi {
position: absolute;
width: 165px;
top: 150px;
}
#navi li {position: relative;}
#navi ul {
display: block;
width: 120px;
list-style: none;
padding: 0;
}
#navi a, #navi span {
display: block;
height: 16px;
padding: 15px 0px 20px 5px;
text-decoration: none;
color: #999999;
font: bold 12px arial, helvetica, sans-serif;
background-repeat: no-repeat;
background-position: top right;
}
#navi a:active, #navi a:focus {outline: none;}
#navi ul ul span, #navi ul ul a {
display: block;
width:140px;
height: 14px;
padding: 15px 0px 18px 5px;
margin-left: 20px;
border-bottom: 1px solid #777777;
text-decoration: none;
font: bold 11px arial, helvetica, sans-serif;
color: #999999;
background-repeat: no-repeat;
background-position: top right;
}
#navi ul a:hover, #navi ul span:hover {color: #bdb177;}
#navi ul ul ul a , #navi ul ul ul span {
display: block;
width: 70px;
height: 15px;
padding: 8px 0px 5px 10px;
margin-left: 85px;
border-bottom: 1px solid #777777;
color: #bdb177;
font: bold 11px arial, helvetica, sans-serif;
text-align: right;}
#navi ul ul ul a:hover, #navi ul ul ul span:hover {
color: #777777;
}
#navi ul ul ul,
#navi ul ul,
#navi ul li:hover ul ul,
#navi ul li.issliste ul ul
{display: none;}
#navi ul li:hover ul,
#navi ul ul li:hover ul,
#navi ul li.issliste ul
{display: block;}
#raum {
margin-top: 10px;
background-image: url("../assets/images/nav_raum40.jpg");
}
#shuttle {
background-image: url("../assets/images/nav_shuttle40.jpg");
}
#iss {
margin-top: 10px;
background-image: url("../assets/images/nav_iss40.jpg");
}
#home {background-image: url("../assets/images/nav_home40.jpg");}
#ground {background-image: url("../assets/images/nav_ground40.jpg");}
#const {background-image: url("../assets/images/nav_const40.jpg");}
#gloss {background-image: url("../assets/images/nav_gloss40.jpg");}
#chronik {background-image: url("../assets/images/nav_chronik40.jpg");}
#module {background-image: url("../assets/images/nav_module40.jpg");}
HTML-Code:
<div id="navi"> <ul> <li><a id ="home" href="../index.html">Home</a></li> <li></li> <li><a id="raum" href="./raumfahrt.html">Raumfahrt</a> <ul> <li><a id="shuttle" href="./shuttle.html">Space Shuttle</a></li> <li><a id="ground" href="./ground.html">Ground Control</a></li> <li><a id="const" href="./2018.html">Constellation</a></li> <li><a id="gloss" href="./glossar.html">Glossar</a></li> </ul> </li> <li class="issliste"><span id="iss">ISS</span> <ul> <li><a id="chronik" href="./1998.html">Chronik</a></li> <li><span id="module">Module</span> <ul> <li><span>Columbus</span></li> <li><span>Kibo</span></li> <li><span>Destiny</span></li> <li><span>Harmony</span></li> </ul> </li> </ul> </li> </ul> </div> Ich hoffe hier vielleicht nun Hilfe für mein Problem zu finden, da ich langsam aber sicher verzweifle eine Lösung zu finden bzw. überhaupt erstmal den Fehler in dem ganzen zu finden... In der Hoffnung auf konstruktive Mithilfe... Danke und Gruss... Mac 
|
| Sponsored Links |
|
16.08.2009, 15:35
|
||||
|
||||
|
Ich habe Deine Seite nicht aufgerufen und auch nur die erste Regel Deines CSS' angeschaut, aber dort fehlt schonmal der horiz. Offset (left), den der IE immer gerne möchte.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
| Sponsored Links |
|
16.08.2009, 16:36
|
|||
|
|||
|
Hallo Heiko...
danke für den ersten Hinweis... nun suche ich gerade schon wild bei Google nach Hintergründen zu dem Thema offset, finde aber nichts was ich a) verstehe oder b) mir erklärt was es damit eigentlich genau auf sich hat... Das ist was neues für mich in Sachen CSS... Noch nie gehört geschweige denn benutzt... Gruss Mac
|
|
16.08.2009, 16:42
|
||||
|
||||
|
Doch, Du benutzt für #navi ja auch top
 (vert. Offset)Jetzt noch left dazu, und dann könnte es schon gehen (das Element, an dem ausgerichtet werden soll, braucht dazu allerdings position: relative). Code:
#navi {
position: absolute;
width: 165px;
top: 150px;
left: 0;
}
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
|
16.08.2009, 17:22
|
|||
|
|||
|
Mea Culpa...
 ok, in sofern habe ich es tatsächlich bereits genutzt... Ich habe damit nun ein bisserl gespielt, jedoch war im Resultat keine Veränderung... Ausserdem kann ich #navi kein relative mitgeben, da dann alles nach unten verrutscht und ausserdem der Haupttext mit dem aufklappen mitwandert... Aber selbst beim Test mit relative und left:0px war keine Veränderung im IE gegeben... Leider... Also doch noch kein neuer praktikabler Ansatz... Gruss Mac
|
|
16.08.2009, 19:33
|
||||
|
||||
|
Zitat:
Nun habe ich Deine Seite doch mal aufgerufen, und bei Dir ist das betreffende Element eine Tabellenzelle. Gleichzeitig setzt Du aber keinerlei default-Abstände auf Null (siehe [FAQ]FAQ[/FAQ] "CSS-Prolog"), solltest das aber als erstes tun, zumindest aber den margin der ul, denn deren default-Wert im IE ist verantwortlich für die Verschiebung. Dennoch sollte man im IE möglichst nie pos. abs. ohne beide Offsets benutzen (im konkreten Falle, solltest Du left sogar nur dem IE zeigen).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
|
17.08.2009, 13:51
|
|||
|
|||
|
Hallo Heiko...
erstmal tausend Dank für deine Hilfestellung! Problem 1 ist damit nun nach vielen schlaflosen Nächsten endlich beseitigt. Das mitgeben von margin: 0px dem UL Element war des Rätsels Lösung... Nun habe ich aber leider noch eine weitere Frage die dasselbe Problem betrifft und wohl einen ähnlichen Hintergrund hat. Und zwar werden beim Erstaufrufen der Seiten im IE die ersten Unterebenen über der ersten Ebene angezeigt. Erst nach einem ersten überfahren der Unterebnene richten sie sich korrekt aus und überlagern sich nicht mehr gegenseitig. Hast du dafür eventuell auch noch einen Lösungstipp? Danke und Gruss... Mac
|
|
17.08.2009, 16:45
|
||||
|
||||
|
Füge am besten erstmal den CSS-Prolog ein ([FAQ]FAQ[/FAQ]), validieren wäre auch nicht verkehrt (30 HTML-Fehler machen weiteres Debugging relativ müßig).
Dann siehe FAQ 10 für weitere die Behandlung von li (erstmal hasLayout setzen, und wenn das nicht hilft, mit width: 100%; floaten lassen - allerdings immer nur für den IE!).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 17:32 |
| grafische Navigation horizontal zentrieren, klappt nicht | lila_3 | CSS | 4 | 30.11.2010 10:25 |
| Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 08:55 |
| Boxen von Navigation und Logo sind zu weit auseinander | lila_3 | CSS | 2 | 03.09.2009 23:28 |
| Probleme mit horizontaler Navi rechts | lila_3 | CSS | 2 | 14.07.2009 21:36 |
Linear-Darstellung
