zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden "position:absolute" für Navigation: IE rückt Untermenü bis zum aktivem Menüpunkt ein.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.05.2009, 15:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.05.2009
Ort: Stuttgart
Beiträge: 1
DerPilot81 befindet sich auf einem aufstrebenden Ast
Standard "position:absolute" für Navigation: IE rückt Untermenü bis zum aktivem Menüpunkt ein.

Hallo,

aus einen CMS System (Magnolia) wurde eine Homepage generiert mit CSS und HTML Code.

Für die Navigation (horizontal) sind drei Ebenen vorgesehen, die dann "aufgeblättert" werden wenn der vorherige Menüpunkt aktiv ist.

Das CMS System hat das mit "position" realisiert (teils mit absolute und relative). Jedoch wird die zweite und dritte Ebene im IE eingerückt dargestellt. Die Navigationsleiste beginnt dann immer unterhalb des aktiv gewählten Menüpunktes. Im FF dagegen stimmt die anzeige.

An was kann das denn liegen? Ich denke es ist vermutlich nicht die optimale Lösung das mit "position" zu machen. Aber das System hat es so generiert und wenn möglich würde ich es gerne so belassen. An dem HTML Code kann man nichts ändern, lediglich die CSS kann angepasst werden.

Herzlichen Dank schon mal. Ich habe mich bereits drei Tage damit befasst und schon einiges probiert aber die Einrückung konnte ich bislang nicht umgehen. Scheinbar mal wieder ein IE Problem. Ähnliche Probleme habe ich auch noch nicht gefunden.

Bilder:
Es soll so wie auf dem ersten Bild aussehen (links bündig). Im FF ist die Anzeige in Ordnung.
So wie auf dem zweiten Bild sieht es im IE aus. Seltsam eingerückt.

Anzeige im Firefox:


Anzeige im Internet Explorer:



Es folgt ein Auszug auf der CSS und aus der HTML Datei:


CSS (nur der Teil für die Navigation):

Code:
/* GLOBAL HORIZONATAL NAVIGATION
-------------------------------- */

/* 1st level horizontal subnav */

#nav-global {
        border-top: 1px solid #4a4a4a;
}

#nav-global.plus-navsub {
        min-height: 6.8em;
        height: 6.8em; /* IE 6 */
}

#wrapper > #nav-global.plus-navsub {
        height: auto;
}

#nav-global ul {          --> Das ist für die erste Ebene
        position: relative;
        background: black url(../img/bgs/nav-global-line.png) 0 93% repeat-x;
        float: left;
        width: 100%;
        margin: 0 0 24px 0;
        list-style: none;
}

#nav-global.plus-navsub ul {
        border-bottom: none;
}

#nav-global li {
        float: left;
        margin: 2px 10px 0 0;
        padding-bottom: 5px;
        font-size: 150%;
        font-weight: bold;
}

#nav-global li a,
#nav-global li a:visited,
#nav-global li strong {
        display: block;
        float: left;
        color: #fff;
        text-decoration: none;
}

#nav-global li a {
        cursor: pointer; /* IE */
}

/* on + open */
#nav-global li.on,
#nav-global li.open {
        background: url(../img/bgs/nav-global.png) 50% 90% no-repeat;
}

#nav-global li strong,
#nav-global li.open a {
        xxxbackground: #c0d0ec;
}

#nav-global li strong span,
#nav-global li.open a span {
        padding-right: 10px;
}

#nav-global li span,
#nav-global li.open a span {
        float: left;
        margin-left: 5px;
        padding: 6px 10px 5px 5px;
}


/* 2nd level horizontal subnav */

#nav-global ul ul {    --> Das ist für die zweite Ebene
        position: absolute;
        left: 0;
        top: 2.3em;
        width: 940px;
}

#nav-global li li,
#nav-global li li.on {
        background: none;
        font-size: 100%;
}

#nav-global li.open li span,
#nav-global li.open li a,
#nav-global li.open li strong{
        background: none;
        font-weight: normal;
}

#nav-global li.open a {
        text-decoration: none;
}

#nav-global li.open li.on a span {
        font-weight: bold;
        color: #081c73;
}

#nav-global li li a:hover,
#nav-global li li a:active,
#nav-global li li a:focus,
#nav-global li li a:hover span,
#nav-global li li a:active span,
#nav-global li li a:focus span {
        background: none;
        color: #081c73;
}



/* 3nd level horizontal subnav */

#nav-global ul ul ul {       --> Das ist für die dritte Ebene
        position: absolute;
        left: 0;
        top: 2.2em;
        width: 940px;
}

#nav-global li li li,
#nav-global li li li.on {
        background: none;
        font-size: 100%;
}

#nav-global li li.open li span,
#nav-global li li.open li a,
#nav-global li li.open li strong{
        background: none;
        font-weight: normal;
}

#nav-global li li.open a {
        text-decoration: none;
}

#nav-global li li.open li.on a span {
        font-weight: bold;
        color: #081c73;
}

#nav-global li li li a:hover,
#nav-global li li li a:active,
#nav-global li li li a:focus,
#nav-global li li li a:hover span,
#nav-global li li li a:active span,
#nav-global li li li a:focus span {
        background: none;
        color: #081c73;
}

HTML (nur der Teil der Navigation):

Code:
    <div id="nav-global" class="plus-navsub">
        <h6>Navigation</h6>
      <ul>


              <li id="nav-sec-home">
                      <a href="/Author/Home.html"><span>Home</span></a>
              </li>


              <li id="nav-sec-unternehmen">
                      <a href="/Author/Home/Unternehmen.html"><span>Unternehmen</span></a>
              </li>


              <li id="nav-sec-Produkt" class="open">
                      <a href="/Author/Home/Produkt.html"><span>Produkt</span></a>
      <ul>


              <li>
                      <a href="/Author/Home/Produkt/Wozu_IdM-.html"><span>Anwendung</span></a>
              </li>


              <li class="open">
                      <a href="/Author/Home/Produkt/Bausteine.html"><span>Bausteine</span></a>
      <ul>


              <li>
                      <a href="/Author/Home/Produkt/Bausteine/Provisioning.html"><span>Provisioning</span></a>
              </li>


              <li>
                      <a href="/Author/Home/Produkt/Bausteine/Compliance.html"><span>Compliance</span></a>
              </li>


              <li>
                      <a href="/Author/Home/Produkt/Bausteine/Single_Sign_On.html"><span>Single Sign On</span></a>
              </li>


              <li class="on">
                      <a href="/Author/Home/Produkt/Bausteine/Workflow_Content.html"><strong><span><em>You are here:</em>Workflow -..</span></strong></a>
              </li>
      </ul>
              </li>


              <li>
                      <a href="/Author/Home/Produkt/Produkte.html"><span>Produkte</span></a>
              </li>


              <li>
                      <a href="/Author/Home/Produkt/Stolpersteine.html"><span>Stolpersteine</span></a>
              </li>
      </ul>
              </li>


              <li id="nav-sec-leistung">
                      <a href="/Author/Home/Leistung.html"><span>Leistung</span></a>
              </li>


              <li id="nav-sec-studien_download">
                      <a href="/Author/Home/Studien_Download.html"><span>Studien / Download</span></a>
              </li>


              <li id="nav-sec-projekte_referenzen">
                      <a href="/Author/Home/Projekte_Referenzen.html"><span>Projekte</span></a>
              </li>


              <li id="nav-sec-karriere">
                      <a href="/Author/Home/Karriere.html"><span>Karriere</span></a>
              </li>
      </ul>
    </div><!-- end nav-global -->

Zusatz:
Da die HP leider nur durch eine Anmeldung in einem System möglich ist habe ich versucht ein offline Demo zu erstellen. Dabei ist mir aufgefallen, dass der Fehler nicht reproduzierbar ist. Habe nun einige Seiten und das Stylesheet lokal gespeichert und dann werden die Untermenüpunkte seltsamerweise richtig angezeigt.

Es ist scheinbar ein IE 6 & 7 spezifisches Problem.
Wie ich gerade gesehen habe klappt es im IE 8 ohne Probleme.

Dennoch seltsam, warum es lokal im IE 7 funktioniert.



Vielleicht hat jemand einen Rat. Falls noch mehr Code notwendig sein sollte kann ich den gerne nochschicken.

Ich bedanke mich dafür, dass ihr das anschaut und vielleicht hat ja wirklich jemand eine Idee warum das so sein könnte.

LG
Ingo
Angehängte Grafiken
Dateityp: jpg soll.jpg (47,7 KB, 12x aufgerufen)
Dateityp: jpg IST im IE.jpg (57,1 KB, 12x aufgerufen)

Geändert von DerPilot81 (15.05.2009 um 15:22 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
darstellung, einrückung, falsche position, firefox, internetexplorer, position: absolute, relative, unterschiedlich

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
Problem mit Navigation safari CSS 12 20.04.2011 11:11
Float-Problem? mischaef CSS 33 20.10.2010 16:20
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 18:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:18 Uhr.