CSS: text-decoration: none; wird ignoriert

[Forumsgast]

Hallo zusammen,

ich habe folgendes Stück HTML-Code:

<div id="divbox_34" style="background-color: rgb(255, 255, 255);">&lt;
    <span style="color: rgb(0, 0, 255);">
        <span style="font-weight: bold;">
            <span style="font-style: italic;">
                <span style="text-decoration: underline;">[ADMIN] // [ADMIN] soll unterstrichen sein
                    <span style="font-weight: normal; font-style: normal; text-decoration: none;">phpascal // phpascal soll normal sein
                        <span style="font-weight: normal; font-style: normal; text-decoration: none;">
                            <span style="color: rgb(0, 0, 0);">&gt; test</span>
                        </span>
                    </span>
                </span>
            </span>
        </span>
    </span>
</div> 

In der fünften Zeile wird die CSS-Eigenschaft auf "text-decoration: underline;" gesetzt und auf Zeile 6 wieder auf "text-decoration: none;". Mein Problem ist, dass trotz Zeile 6 der nachfolgende Text immer noch unterstrichen ist (!important erzielte ebenfalls keinen Effekt). Die Begrenzung der Ursache konnte ich auf die folgenden Elemente reduzieren:

<span style="text-decoration: underline;">[ADMIN]<span style="text-decoration: none;"> phpascal</span></span> 

Die Underline bleibt nach wie vor bestehen. Kurz umrissen: Ich habe zwei Spans, die ineinander verschachtelt sind. Das äussere Span sagt "underline!", das innere sagt "kein underline mehr!". Trotzdem gibt es innerhalb des zweiten Spans den Underline noch. Kann mir jemand einen Wink in die richtige Richtung geben, um das Problem zu lösen?

Kurz noch zu dem eher ungewöhnlichen HTML-Aufbau. Hintergrund ist eine Möglichkeit in einer PHP-API, Text auf die folgende Weise ganz einfach einzufärben:

return Color::UNDERLINE .'[ADMIN] '. Color::RESET .'phpascal'; 

Die JavaScript-Funktion bekommt dann den folgenden String

§u[ADMIN] §zphpascal

und soll ihn auf Grundlage der §x-Tags formatieren (§u bedeutet unterstrichen, §z bedeutet Formatierung zurücksetzen, etc. etc.). Damit wird der oben erzeugte HTML-Code generiert. Klar könnte man bei der API auch gleich direkt HTML benutzen, aber dann besteht die Möglichkeit, dass invalider Code geschrieben wird. Bis auf das CSS-Problem funktioniert aber alles tiptop und es ist für den API-Anwender relativ einfach und leicht verständlich, weshalb ich das Konzept eigentlich nicht ändern möchte.

[Forumsgast]

Hallo zusammen,

ich habe folgendes Stück HTML-Code:

<div id="divbox_34" style="background-color: rgb(255, 255, 255);">&lt;
    <span style="color: rgb(0, 0, 255);">
        <span style="font-weight: bold;">
            <span style="font-style: italic;">
                <span style="text-decoration: underline;">[ADMIN] // [ADMIN] soll unterstrichen sein
                    <span style="font-weight: normal; font-style: normal; text-decoration: none;">phpascal // phpascal soll normal sein
                        <span style="font-weight: normal; font-style: normal; text-decoration: none;">
                            <span style="color: rgb(0, 0, 0);">&gt; test</span>
                        </span>
                    </span>
                </span>
            </span>
        </span>
    </span>
</div> 

OMG. Aus welchem Jahrtausend ist der denn?!

[Minecrafter]

Wenn Du Dir die Mühe gemacht hättest, meinen Beitrag komplett durchzulesen, müsstest Du nicht fragen.

Wenn Du einen besseren Vorschlag für die Realisierung hast, werde ich mich gerne damit befassen.

[Forumsgast]

Ich habe deinen Beitrag gesehen, aber verstehe es trotzdem nicht, nikosch hat recht, dein Code ist Murks. Weisst du überhaupt, was ein span-Tag ist?

Ein span-Tag umfasst nur genau den Inhalt, der innerhalb des span-Tags ist. Ein float: right auf einen span-Tag anwenden bringt nichts, weil der Tag grundsätzlich keine Ahnung (und kein Interesse) daran hat, wo er sich überhaupt befindet, bzw., was in selber umfasst. Das würdest du in Firebug z.B. sehr gut sehen.

Span-Tags verschachteln macht nie Sinn, das kannst du auch nacheinander lösen:

<div><span>Admin</span><span> </span><span>ist angemeldet</span><span> </span><span>seit dem letzen Jahrtausend</span></div>

Dann verwende bitte eine CSS-Datei. Und für das Anpöbeln von nikosch gibts den roten Böller umsonst.

[Forumsgast]

lass mich das für dich Googlen
lass mich das für dich Googlen

[Minecrafter]

Auf Dein Code-Beispiel bin ich auch bereits gekommen, das Problem ist jedoch, was passiert, wenn ich den Text zum Beispiel grün und fett formatieren möchte. Deswegen die Verschachtelung. Von float: right; war übrigens nie die Rede in meinem Beitrag. Ich find die Verschachtelung auch nicht besonders toll, aber mir fällt keine andere Möglichkeit ein, wie man das mit den Farbtags lösen könnte.

Und gepöbelt hab ich nicht, aber aus der Antwort muss(te) ich zwangsläufig schliessen, dass gerade nur der Code gesehen und direkt danach die Antwort verfasst wurde.

Meinetwegen kannst Du hier dichtmachen (nach allem, was ich in den letzten paar Monaten gelesen habe, ist das sowieso Deine Lieblingsfreizeitbeschäftigung), ich werde in einem anderen Forum nachfragen, aber vielen Dank trotzdem für die Hilfe.

[Forumsgast]

Let me Google that for you..

lass mich das für dich Googlen
lass mich das für dich Googlen

Funktioniert immer, oder

[Forumsgast]

Was soll ich sagen, unter den Top-Antworten steht mehrmals die Antwort?!

Da kann ich dem Fragenden nur unterstellen, einen Sch... auf Eigeninitiative zu setzen.

[Minecrafter]

Was soll ich sagen, unter den Top-Antworten steht mehrmals die Antwort?!

OMG. Aus welchem Jahrtausend ist der denn?!

Die Top-Antwort schlechthin.

Dann verwende bitte eine CSS-Datei.

Das hatte ich ebenfalls versucht, mit demselben Ergebnis.

Span-Tags verschachteln macht nie Sinn, das kannst du auch nacheinander lösen:

Darauf hatte ich eine Antwort und eine Begründung gegeben, wieso das - jetzt in meinem spezifischen Fall - keine Option ist.

lass mich das für dich Googlen
lass mich das für dich Googlen

Google hatte ich auch schon bemüht, die dort aufgeführten Treffer halfen mir jedoch nicht bei der Lösung meines Problems.

[Forumsgast]

Tja, da ist auch nichts zu lösen.

[Forumsgast]

Jaja... Die Grunlagen... Die Grundlagen...

CSS-Datei:

.red {
    color: red;
}
.underline {
    text-decoration: underline;
}

HTML:

<span class="red underline">Rot mit Unterlinie</span>

Und hör auf, für deinen Schwachsinn rote Bömmel zu verteilen !

[Minecrafter]

Jaja... Die Grunlagen... Die Grundlagen...

CSS-Datei:

.red {
    color: red;
}
.underline {
    text-decoration: underline;
}

HTML:

<span class="red underline">Rot mit Unterlinie</span>

Und hör auf, für deinen Schwachsinn rote Bömmel zu verteilen !

Schon zum dritten Mal: Diese Methode lässt sich nicht auf mein Grundgerüst mit den Farb-Tags adaptieren.

Und zum Roten-Bömmel-Schwachsinn: Wir ernten, was wir säen.

[Forumsgast]

Schon zum dritten Mal: Diese Methode lässt sich nicht auf mein Grundgerüst mit den Farb-Tags adaptieren.

Aha, und wieso nicht?

[Minecrafter]

Lies Dir bitte meinen ersten Beitrag durch und beantworte Dir die Frage selbst.

[Forumsgast]

[...]Klar könnte man bei der API auch gleich direkt HTML benutzen, aber dann besteht die Möglichkeit, dass invalider Code geschrieben wird. [...]

Das steht da - das einzige was mir dazu einfällt: Jetzt generierst du erst recht invalider Code. Ich verstehe nicht, wieso du den Span bereits wieder nach der betreffenden Stelle schliessen kannst.

Ansonsten: Das ist ein Forum, wo dir geholfen wird, aber nur, wenn du auch bereit bist, deine Konzeptfehler auszugleichen. Wir helfen dir nicht, dein Murks-Design weiter zu verschlimmbessern. Sorry.