[CSS:]Problem mit Liste in IE

  1. maceis

    maceis Thread StarterMacUser Mitglied

    Mitglied seit:
    24.09.2003
    Beiträge:
    16.696
    Zustimmungen:
    602
    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
     
    maceis, 04.07.2006
  2. 2nd

    2ndMacUser Mitglied

    Mitglied seit:
    25.07.2004
    Beiträge:
    8.901
    Zustimmungen:
    242
    Hi Kollega :)

    Kannst Du mal das CSS-Teil dazu posten?

    2nd
     
  3. maceis

    maceis Thread StarterMacUser Mitglied

    Mitglied seit:
    24.09.2003
    Beiträge:
    16.696
    Zustimmungen:
    602
    Ah - ganz vergessen.
    Hab's oben noch eingefügt.
     
    maceis, 05.07.2006
  4. maceis

    maceis Thread StarterMacUser Mitglied

    Mitglied seit:
    24.09.2003
    Beiträge:
    16.696
    Zustimmungen:
    602
    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?
     
    maceis, 05.07.2006
  5. ThaHammer

    ThaHammerMacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    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!
     
    ThaHammer, 06.07.2006
  6. maceis

    maceis Thread StarterMacUser Mitglied

    Mitglied seit:
    24.09.2003
    Beiträge:
    16.696
    Zustimmungen:
    602
    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.
     
    maceis, 06.07.2006
  7. ThaHammer

    ThaHammerMacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    IE ist ein einziger Bug
     
    ThaHammer, 06.07.2006
  8. little_pixel

    little_pixelMacUser Mitglied

    Mitglied seit:
    06.06.2006
    Beiträge:
    4.010
    Zustimmungen:
    1.002
    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
     
    little_pixel, 06.07.2006
  9. maceis

    maceis Thread StarterMacUser Mitglied

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