zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE verschiebt Navi Menü

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.08.2009, 15:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2007
Beiträge: 11
macmensa befindet sich auf einem aufstrebenden Ast
Standard 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");}
und der HTML Teil sieht wie folgt aus:

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>
Da ich noch am Anfang meiner "Homepage-Karriere" stehe, nutze ich momentan noch einen HTML-Generator zum erstellen meiner Seiten. NetObjectsFusion 10. Ich weiss das reines HTML programmieren sicher etwas anderes ist und viele es hier bevorzugen. Jedoch ist es so für einen Anfänger einfacher und noch will und kann ich es nicht missen. Nichts desto trotz habe ich bereits angefangen einige Stellen innerhalb von NOF 10 selbst umszusetzen. Obige Navi ist dafür ein erster Ansatz...

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.08.2009, 15:35
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.08.2009, 16:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2007
Beiträge: 11
macmensa befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 16.08.2009, 16:42
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
  #5 (permalink)  
Alt 16.08.2009, 17:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2007
Beiträge: 11
macmensa befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 16.08.2009, 19:33
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von macmensa Beitrag anzeigen
Ausserdem kann ich #navi kein relative mitgeben
Nicht #navi braucht pos. rel., sondern das Element, an dem #navi ausgerichtet werden soll (das schrieb ich bereits).

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.)
Mit Zitat antworten
  #7 (permalink)  
Alt 17.08.2009, 13:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.09.2007
Beiträge: 11
macmensa befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 17.08.2009, 16:45
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:51 Uhr.