horizontales menu im IE gebrochen

Dieses Thema im Forum "Web Page Design" wurde erstellt von hoppelmoppel, 06.01.2007.

  1. hoppelmoppel

    hoppelmoppel Thread Starter MacUser Mitglied

    Beiträge:
    518
    Zustimmungen:
    2
    MacUser seit:
    12.04.2006
    Hallo Leute!

    Hab hier ein Problem mit nem horizontalen Menu (ohne Popup) im IE. Und zwar wird beim IE6 (andere hab ich noch nicht getestet) das Menu nach dem letzten Link gebrochen. Also das Menu soll sich ueber die gesammte Breite des Parents div erstrecken. Aber das hab ich bis jetzt nicht hinbekommen. Keine Ahnung ob das wieder an dem 3px float Bug liegt oder sonst was. Vielleicht kann ja jemand helfen.

    Hier ist mal nen Pic dazu. Ich hab die Problembereiche mit den Pfeilen angedeutet:

    [​IMG]

    und das der dazugehörige source vom css file:

    Code:
     
    div#verticalMenu {
            background-color: #191b1f;
            color: #999999; 
            float: left;
            width: 16.66%;
            margin: 0 0 0 0;
    }       
    div.verticalMenuItem {
            color: #999999;
            background-color: #191b1f;
            text-align: center;
            height: 2em;
            line-height: 2em;
            border-bottom: 1px solid #111111;
    }       
    div#verticalMenu a {
            display: block;
            font-weight: bold;
            height: 100%;
            outline: 0;
    }
    div#verticalMenu a:link {
            color: #ff8315;
            background-color:#191b1f;
            font-size: 0.85em;
            font-weight: bold;
            letter-spacing: 2px;
            text-decoration: none;
    }
    
    Danke!
     
    Zuletzt bearbeitet: 06.01.2007
  2. joikem

    joikem MacUser Mitglied

    Beiträge:
    470
    Zustimmungen:
    0
    MacUser seit:
    06.03.2002
    Leider kein Bild zu sehen!
     
  3. ThaHammer

    ThaHammer MacUser Mitglied

    Beiträge:
    3.277
    Zustimmungen:
    13
    MacUser seit:
    01.06.2004
    Ja etwas mehr bräuchten wir schon! :D
     
  4. roggnroll

    roggnroll MacUser Mitglied

    Beiträge:
    46
    Zustimmungen:
    0
    MacUser seit:
    27.12.2006
    Generell empfehle ich dir ne Browserweiche! Einmal CSS für Internet Exploder 6 und einmal CSS für alle modernen Browser
     
  5. hoppelmoppel

    hoppelmoppel Thread Starter MacUser Mitglied

    Beiträge:
    518
    Zustimmungen:
    2
    MacUser seit:
    12.04.2006
    Tja Freundin hatte den Lappi zugeklappt ;)

    Browserweiche .. is e klar .. war ja zuvor noch viel schlimmer als jetzt ;)

    Hmm, komisch um 3 war der Lappi noch nicht zugeklappt ..

    OK .. vielleicht haett ich keine localhost addi kopiern sollen XD

    so jetzt sollts gehn ;)
     
  6. 2nd

    2nd MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    MacUser seit:
    25.07.2004
    Generell empfehle ich keine Browserweiche. Wofür auch? Gerade für den IE 5/6 gibt es bei echten Problemen gut dokumentierte Workarounds, die sich mit wenigen Zeilen zusätzlichem CSS bei standardkonformen XHTML unkompliziert nutzen lassen - ohne Browserweichen und ähnliche Tricks.

    Hast Du noch das HTML-Markup zum Bild? :)

    2nd
     
    Zuletzt bearbeitet: 06.01.2007
  7. 2nd

    2nd MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    MacUser seit:
    25.07.2004
    Zum Bild: Du schreibst was von einem vertikalen Menu, ich sehe nur ein horizontales? Ausserdem sehe ich Div-Suppe :kopfkratz:


    2nd
     
  8. hoppelmoppel

    hoppelmoppel Thread Starter MacUser Mitglied

    Beiträge:
    518
    Zustimmungen:
    2
    MacUser seit:
    12.04.2006
    Oh man ich sollt echt nicht in der nacht tippen ;) Na klar horizontales ;)

    Code:
    <div id="horizontalMenu">
    <span class="horizontalMenuItem"><a href="index.php">HOME</a></span>
    <span class="horizontalMenuItem"><a href="">Blog-Status</a></span>
    <span class="horizontalMenuItem"><a href="">LINK 2</a></span>
    <span class="horizontalMenuItem"><a href="">LINK 3</a></span>
    <span class="horizontalMenuItem"><a href="">LINK 4</a></span>
    <span class="horizontalMenuItem"><a href="">LINK 5</a></span>
    </div>
    
    Ich kann zwar die breite der einzelnen Punkte etwas verkleinern, damit es nicht gebrochen wird .. jedoch bleibt immer noch der kleine Rest auf der rechten Seite über.
     
  9. 2nd

    2nd MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    MacUser seit:
    25.07.2004
    Hier ist ein Beispiel, welches:

    • im IE5, IE6, IE7 unter Windows XP läuft
    • in Safari und Firefox unter OS x läuft
    • semantisch korrekt und im Validator keine Fehlermeldungen produziert ist
    • ohne Hacks/Browserweichen o. ä. auskommt
    • fluid ist, d. h. beim Ändern der Schriftgrösse per APFEL-Plus bleibt alles so wie es aussehen soll.

    http://www.freelancr.biz/media/examples/html_css/horizontalesMenu/horizontalesMenu.htm

    Ich habe es gerade in den o. e. Browser getestet. Der IE5 zentriert nicht wie die anderen, warum, weiss ich im Moment nicht.

    Generelles Verbesserungsvorschläge gerne zu mir :)

    Die CS-Sheets sind im HTML-Dokument, Du kannst Dir das ja speichern und selber modifizieren.

    2nd
     
  10. hoppelmoppel

    hoppelmoppel Thread Starter MacUser Mitglied

    Beiträge:
    518
    Zustimmungen:
    2
    MacUser seit:
    12.04.2006
    Hehe, ich danke dir!

    Vielleicht haste ja noch Tipps .. warum die Probleme mit meinem Menu auftreten :)

    Im Safari hab ich jetzt mal gegguggt, da ist gleich noch nen viel gröesserer Space auf der rechten Seite :)
     
Die Seite wird geladen...

Diese Seite empfehlen