[CSS:]Problem mit Liste in IE

Dieses Thema im Forum "Web Page Design" wurde erstellt von maceis, 04.07.2006.

  1. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    Registriert seit:
    24.09.2003
    hallo zusammen,

    habe auf einem Seitenentwurf eine Art verschachtelte Liste in der Navigation.
    In Safari wird alles wie geünscht dargestellt im IE werden ohne mir rekennbaren Grund zwei Unterpunkte (der erste und der letzte) zur Seite gerückt.

    Hier mal ein Bild davon:
    [​IMG]

    Der Quellcode (Ausschnitt) sieht so aus:
    Code:
    <div id="navi">
    <ul>
        <li><a href="/hintergruende/einleitung.html" title="#">Hintergründe</a></li>
    </ul>
    <ul class="sub">
        <li><a href="/hintergruende/einleitung.html" title="#">- Teil 1</a></li
        ><li><a href="/hintergruende/ziele.html" title="#">- Teil 2</a></li
        ><li><a href="/hintergruende/verfahren.html" title="#">- Teil 3</a></li
        ><li><a href="/hintergruende/soz_situation.html" title="#">- Teil 4</a></li
        ><li><a class="active" href="/hintergruende/ergebnisse.html" title="#">- Teil 5</a></li>
    </ul>
    <hr />
    <ul>
        <li><a href="/kontakt.html" title="#">Kontakt</a></li>
        <li><a href="/impressum.html" title="#">Impressum</a></li>
    </ul>
    </div>
    (Die Forensoftware verhaut die Zeilenumbrüche, wenn ich mit HTML formatiere)
    CSS:
    HTML:
    #navi ul {
        list-style: none;
        margin :0;
        padding: 0;
    }
    
    #navi li {
        margin: 5px;
        border: 1px solid #339;
        padding: 0px;
        background-color: #ccddff;
        font-weight: bold;
    }
    #navi a {
        text-decoration: none;
        display: block;
        color: #000;
    }
    #navi a.active {
        color: #f33;
    }
    (...)
    #navi ul.sub {
        border: 1px solid #339;
        border-top-color: #ccddff;
        margin: -6px 5px 0 25px; 
    }
    #navi ul.sub li{
        border-width: 0;
        margin: 0;
        padding-left: 5px;
    }
    #navi ul.sub li a {
        border-width: 0;
        font-weight: normal; 
    }
    #navi ul.sub li a.active {
        font-weight: bold;
    }
    Hat jemand 'ne Ahnung, wie ich die beiden Elemente linksbündig mit den anderen bekomme?

    Danke im voraus.

    Gruß
    maceis
     
    Zuletzt bearbeitet: 05.07.2006
  2. 2nd

    2nd MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    Registriert seit:
    25.07.2004
    Hi Kollega :)

    Kannst Du mal das CSS-Teil dazu posten?

    2nd
     
  3. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    Registriert seit:
    24.09.2003
    Ah - ganz vergessen.
    Hab's oben noch eingefügt.
     
  4. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    Registriert seit:
    24.09.2003
    Langsam krieg ich nen Krampf.

    Jetzt hab' ich das Ganze nochmal neu geschrieben mit der Folge, dass im IE 5 die beiden ersten und der letzte Punkt (Teil 1, Teil 2 u. Teil 5) leicht nach rechts gerückt sind während im IE 6 nur der erste und der letzte "verschoben" sind (Teil 1, Teil 5).

    Das darf doch wohl nicht wahr sein :hamma:
    Selbst wenn ich die ganze Liste in eine einzige Zeile schreibe, bekomme ich die Versprünge rein *ääächz*.

    Hat vielleicht jemand noch eine Idee?
     
  5. ThaHammer

    ThaHammer MacUser Mitglied

    Beiträge:
    3.276
    Zustimmungen:
    13
    Registriert seit:
    01.06.2004
    Es gibt im CSS noch die Optionen für Listen, Inline und Outline glaube ich war das. Da geht es zwar drum wo die Listenpunkte erscheinen, aber eventuell hilft Dir das weiter? Es gibt ja den List-Type und dazu die Position!
     
  6. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    Registriert seit:
    24.09.2003
    Inzwischen habe ich herausgefunden, wie ich das Problem umgehen kann.
    Im Bereich des verminderten Abstandes links fügt der IE zusätzliche borders ein mit negativem padding.

    Scheint ein Bug zu sein; zumindest kann ich nicht herausfinden, woher die borders kommen.

    Ich kann sie aber durch einführen einer zusätzlichen Klasse in den <li>-Elementen auf 0 setzen, dann passt die Sache wieder.
     
  7. ThaHammer

    ThaHammer MacUser Mitglied

    Beiträge:
    3.276
    Zustimmungen:
    13
    Registriert seit:
    01.06.2004
    IE ist ein einziger Bug
     
  8. little_pixel

    little_pixel MacUser Mitglied

    Beiträge:
    3.806
    Zustimmungen:
    938
    Registriert seit:
    06.06.2006
    Hallo maceis,

    ich stand vor wenigen Tagen vor dem gleichen Problem.
    Auf allen anderen Bowsern ist das Erscheinungsbild einwandfrei.
    Nur nicht im IE.

    Meine Lösung:
    Ausnahme Anweisungen nur für den "Internetzersprenger".

    Es ist extra Arbeit, aber ca. 80% nutzen nun mal den IE.


    Viele Grüße
     
  9. maceis

    maceis Thread Starter MacUser Mitglied

    Beiträge:
    16.645
    Zustimmungen:
    596
    Registriert seit:
    24.09.2003
    Das ist in diesem Fall (zum Glück) nicht notwendig, da die zusätzlich erforderlichen Anweisungen das Erscheinungsbild in anderen Browsern nicht nachteilig beeinflussen.
     
Die Seite wird geladen...

Diese Seite empfehlen