horizontales menu im IE gebrochen

[hoppelmoppel]

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:

und das der dazugehörige source vom css file:

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!

 

[joikem]

Leider kein Bild zu sehen!

 

[ThaHammer]

Ja etwas mehr bräuchten wir schon!

 

[roggnroll]

Generell empfehle ich dir ne Browserweiche! Einmal CSS für Internet Exploder 6 und einmal CSS für alle modernen Browser

 

[hoppelmoppel]

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

 

[2nd]

Generell empfehle ich dir ne Browserweiche! Einmal CSS für Internet Exploder 6 und einmal CSS für alle modernen Browser

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

 

[2nd]

Zum Bild: Du schreibst was von einem vertikalen Menu, ich sehe nur ein horizontales? Ausserdem sehe ich Div-Suppe


2nd

 

[hoppelmoppel]

Oh man ich sollt echt nicht in der nacht tippen Na klar horizontales

<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.

 

[2nd]

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

 

[hoppelmoppel]

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

 

[2nd]

Was für ein "Space" in Safari und wo?

2nd

 

[hoppelmoppel]

Ich meinte jetzt nicht bei deinem Menu .. sondern mit meinem css file

 

[2nd]

So baut man auch keine Menus mit den SPANs und DIVs

2nd

 

[hoppelmoppel]

Puh .. also wenn ich dein Menu einbauen moechte (angepasst auf % Breiten .. da das restliche Layout auch auf Prozent ausgerichtet ist)bei mir .. zerschiesst es mir das restliche Layout.

Der rote Balken sollte eigentlich 80% Breite haben wie die anderen Elemente

 

[hoppelmoppel]

Hehe, ja das ist nen Einwand mit den spans und divs ... Tjo .. schade ..

 

[2nd]

Dann musst Du alle EMs bei mir rausnehmen. Ausserdem solltest Du den Links Klassen geben, also: a.topNavi:link, a.topNavi:visited usw. Das für das Menu oben und das Menu links.

Links im Menu dürfen die a-Tags als Blockelemente nicht floaten und die LI-Tags dürfen nicht inline sein. Du brauchst also 2 Klassen/IDs für das jeweilige Menu (UL-Tags, LI-Tags, A-Tags inkl. Pseudoklassen).

2nd

 

[hoppelmoppel]

Wenn ich dein Menu auf eine Prozent-Angabe anpasse ... dann hab ich im Safari noch immer diesen rechten Rand wie 4 Posts über mir. Und im IE ists nen 2mm Rand .. strange .. scheint ja nicht jeder Browser diese % Angabe zu mögen.. oder?

 

[hoppelmoppel]

Hmm, ok danke, ja um mein Layout kümmere ich mich später .. würde gerne zuerst dein Menu auf Prozent Angaben umwandeln

Es geht mir ja auch darum, dass das Menu nicht immer auf ein Layout von 6 Links zb ausgelegt ist .. deswegen ja auch die Prozent-Angaben

 

[2nd]

Es liegt an den Breiten für die Links, das sind bei mir 10em.

Gesamtbreite = 60em, 6 Links a 10em = 6x10 = 60.

Prozent: 80% Breite bei Dir sind bei 6 Links 13.3% Breite im a-Selektor.

Mach mal 84% Breite insgesamt, dann sind es 14% Breite bei 6 Links (und nicht so ein Kommazeugs ).

2nd

 

[hoppelmoppel]

Hehe, ja da hast recht .. wobeis ja nicht 13.3 ist .. sonder 16 .. da du ja vom eltern Element ausgehn musst denk ich mal und das ist ja 100%

Nur wenn dann wiederum was weiß ich 7 Elemente reinkommen .. ist es der selbe Murks .. naja .. aba ist fast einfacher die gesammte Breite größer, kleiner zu machen.