Frage an CSS-Profis: vertikales Textmenü

    So, diese Frage richtet sich an absolute CSS-Profis.

    Was ich vorhabe
    Der Einfachkeit halber beschreibe ich nur die erste Menüebene.
    Ich möchte ein vertikales Textmenü erstellen mit einer Gesamtbreite von 190 Pixel. auf voller Breite sollen die einzelnen Menüpunkte unterstrichen sein, gestrichelt. Wenn man mit der Maus über den Menüpunkt geht, soll der Punkt auf gesamter Breite (190 Pixel) grau hinterlegt sein. Auch soll die gesamte Breite verlinkt sein. Vom linken Rand soll der Text des Menüs 10 Pixel eingerückt sein.

    Meine Idee
    CSS

    HTML

    Code
    <div class="mnu_1">
[url='#']Menüpunkt 1[/url]


[url='#']Menüpunkt 2[/url]


</div>

    Mein Problem
    IE, Opera rendern das Boxmodell nicht nach Spezifikationen, sprich, width ist die Gesamtbreite des Objektes, padding wird vom für den Content zur Verfügung stehenden Platz abgezogen.
    FF rendert das ganze nach Spezifikationen. Width ist die Breite des Contents, padding wird zum width addiert. Der Layer ist nun 200 Pixel breit.

    Weiterhin gibt es für a kein width, so dass alles grau hinterlegt werden könnte, funktioniert nur im IE.

    Lösungsansätze
    max-width gibt zwar die maximale Breite eines Objektes an und wird vom IE nicht interpretiert, aber vom Opera, also wieder ein Browser, in dem es anders aussieht.

    DOCTYPE hinzugefügt, damit der IE und Opera width nach den Spezifikationen rendert. Leider unterstützt das Dokument dann in Tabellen nicht mehr das Parameter height. Auch wenn ich height in das TD schreibe wird es nicht übernommen. Zur Erklärung, ich möchte, dass das dokument auf voller Seitenhöhe angezeigt wird (Rahmen links).

    Was kann ich tun?

    hm - mach mal anstatt

    Code
    padding-left


»


text-indent: 10px;

    dann:

    Code
    display: block


    um das ganze verlinkt zu machen.
    das mit dem background color funzt bei mir eben auch nicht..also mit der breite..ich habs einfach anders gemacht: ein 1 px hohes XX breites background image gemacht mit der gewünschten farbe dass sich einfach nach unten wiederholt bis die box ausgefüllt ist.

    hoffe das hilft dir was..

    mfg - phore

    MIST, wieder einb Problem!
    Wenn der Text in einem Menüpunkt mehrzeilig wird, fängt der Text ab der zweiten Zeile ganz links an. text-indent scheint nur für die erste Zeile zu gelten.

    P.S. Das mit background-color klappt bei mir wunderbar.

    So ein Mist ... mit dem richtigen DOCTYPE geht es ja, muss dann mal schauen, ob ich das mit dem Layout doch richtig hinbekomme. Das will nämlich nicht so, wie ich will. Ich fliege immer auf die Klappe, wenn ich eine Tabelle über die gesamte Seite, auch Höhe, verteilen will. Dennoch danke für Deinen Rat, hat mich zumindest schon mal weiter gebracht ;)

    Danke für die Links ... da stehen leider nur Grundlagen drin, das weiß ich alles. Ich hab's mittlerweile auch hinbekommen, zumindest schon mal zu Hause. Habe die Vorlage, an der ich gerade arbeite, nur auf der Arbeit, da muss ich das morgen noch umsetzen.
    Ich werde also einen DOCTYPE 4.01 mit Link zum W3C angeben, damit auch alles richtig sauber ist. So stellt auch der IE das Box-Modell richtig dar. Die Höhenangaben in table und td (100%) werde ich ausschließlich in CSS vornehmen, damit es funktioniert. Hatte vorhin scheinbar nur eine Kleinigkeit übersehen. Ich denke, dass die Seite Ende der Woche online zu sehen ist. Spätestens nächste Woche.
    Ich hoffe, ich vergess nicht, nochmal zu posten, was draus geworden ist.