HTML / CSS Frage

[neustadt]

Ich würde gerne, dass folgendes auch mit dem IE klappt:

User: <i>User</i><span style="margin:15px"></span>Password: <i>Password</i>

Wichtig dabei ist: Wenn man "User" doppelklickt , soll nur "User" makiert werden. IE markiert z.b. auch "Password" mit.

Hässliche Lösung ist ne Tabelle, aber würde es gern ohne die haben.

[maximum]

Grundsätzlich sind tags wie i,b,u zwar nicht deprecated, aber ich würde Elemente mit bestimmten Eigenschaften als Boxen zusammenfassen. Immer schön in span und div schachteln.also <span style="font-style:italic;">User</span> usw... besser gleich Klassen verwenden. Unter html5 sind die Elemente zwar immernoch vorhanden aber manche Browser scheinen mit abgeschlossenen Boxen besser klar zu kommen.

Sorry schreibe am Handy deshalb nur so knapp.

[neustadt]

Das stimmt so nicht. Vom Gebrauch wird in HTML4 abgeraten, aber die sind nicht deprecated.
http://www.w3.org/TR/html401/present/graphics.html#h-15.2

In HTML5 sind sie regulär enthalten. Haben jedoch eine etwas andere Bedeutung als in HTML4
http://www.w3.org/TR/html5/text-level-semantics.html#the-i-element

[maximum]

Habs schon korrigiert, hatte ich irgendwie anders in Erinnerung ;-)

[neustadt]

Ich finde es gut, dass sie drin geblieben sind. meiner Meinung nach sind i und b so grundsätzlich, dass sie ein eigenes tag verdient haben.
Und es dient der Übersicht, wenn man html noch von Hand schreibt.

[AintCoolName]

Das margin sollte auf span keine Wirkung haben, außer man macht mit display:block aus dem inline span ein block.

[RattuS]

HTML-Tags der 5er Spezifikation sind beschreibend/strukturierend (semantisch) beabsichtigt, weswegen Tags aus der alten 4er Spezifikationen nicht mehr gestalterisch verwendet werden sollten. Wäre es nicht der Abwärtskompatibilität zuliebe, hätte das UserAgent-CSS (der Browser) keine Definition mehr dafür. Kurz gesagt: Gib den Tags des Anstandes halber wenigstens eine CSS-Definition, sofern du deren Gestaltung aus der Vergangenheit beabsichtigst.

Die Lösung für dein Problem ist schlichtweg ein Whitespace zwischen den Wörtern:
User: <i>User</i><span style="margin:15px"></span> Password: <i>Password</i>
Die Browser suchen beim Doppelklick (Wort-Markierung) nach Trennzeichen, die weder mit DOM-Elementen noch mit gestalterischen Maßnahmen erzwungen werden können. Dein Code sieht beim Text-Prozessor nämlich so aus:
User: UserPassword: Password

Wenn du ein Vorbild sein willst, mach sowas hier:

<style type="text/css">

i {
font-style: italic;
}

</style>

<span style="padding-right: 15px;">User: <i>User</i></span>
<span>Password: <i>Password</i></span>

Das Trennzeichen hierbei ist z.B. ein Zeilenumbruch im Markup, der im Browser wie ein Leerzeichen interpretiert wird.

Solltest du den Output-Buffer jeglicher leading/trailing Whitespaces seitens deines Web- oder Appservers entledigen, musst du für obiges Beispiel ein geschütztes Leerzeichen (&nbsp;) verwenden.

[neustadt]

Das margin sollte auf span keine Wirkung haben, außer man macht mit display:block aus dem inline span ein block.

Es geht darum alles in einer Zeile zu haben. Das margin ist dafür einen Abstand zwischen user und password zu schaffen.

Die Browser suchen beim Doppelklick (Wort-Markierung) nach Trennzeichen, die weder mit DOM-Elementen noch mit gestalterischen Maßnahmen erzwungen werden können. Dein Code sieht beim Text-Prozessor nämlich so aus:

User: UserPassword: Password

Außer dem IE erkennen aber alle Browser, dass das margin ein Trennzeichen darstellt. (Wurde mir zumindest gesagt, ich selbst kann das nur mit FF bestätigen).

Die Lösung für dein Problem ist schlichtweg ein Whitespace zwischen den Wörtern.

Gibt es noch andere Whitespaces außer einem normalen Leerzeichen und &nbsp;? Denn diese beiden werden jeweils mit markiert.

[RattuS]

Außer dem IE erkennen aber alle Browser, dass das margin ein Trennzeichen darstellt. (Wurde mir zumindest gesagt, ich selbst kann das nur mit FF bestätigen).
Hat bei mir auf keinem der Browser funktioniert. Getestet auf: Chrome 32, Firefox 24, IE 10 (alle unter Windows 8) und IE 8 (unter Windows XP).

Gibt es noch andere Whitespaces außer einem normalen Leerzeichen und &nbsp;? Denn diese beiden werden jeweils mit markiert.
Und das ist tatsächlich auch ein gewollter Standard unter Windows. Ich kenne jedenfalls keinen Workaround.

[neustadt]

Sorry wurde mir in einem Forum Post berichtet, dass es auch mit anderen Browsern ging.
Hängt aber vermutlich auch von der jeweiligen Version ab. Mit dem oben geposteten Code gehts bei mir mit FF 27. Opera habe ich zum ausprobieren schnell die portable Version 12 gezogen und damit gehts auch nicht.

Damit bleibt eine Tabelle wohl die einzige Möglichkeit?

EDIT: User und Password in Ausrufungszeichen setzten und diesen eine Deckkraft von 0 geben, wäre ein wohl Workaround. Aber das finde ich fast noch schlimmer als ne Tabelle :)

[RattuS]

Damit bleibt eine Tabelle wohl die einzige Möglichkeit? [...] Aber das finde ich fast noch schlimmer als ne Tabelle :)
Eine Tabelle ist in diesem Fall überhaupt kein schlimmer Ansatz. Deine Authentifizierung liegt tabellarisch vor, warum also nicht auch so umsetzen?

Tabellen in HTML sind nur in Verruf geraten, weil sie in der Vergangenheit für ganze Layouts missbraucht wurden und eine Generation Webdesigner hervorbrachte, die entweder das Box-Modell oder Alignment nicht verstanden.

[neustadt]

Sieht mir nach unverhältnismäßig viel Code aus, für einen Abstandshalter. Dachte das würde effizienter zu Lösen sein.