Pixelverschiebung

[Fabian]

Hallo, ich habe gerade 2 CSS Problemchen mit folgender Website: Dieser hier!

1. Wenn man oben in der Leiste auf das Passwort-Feld klickt, verschiebt sich der Inhalt dort um einen Pixel nach links. Das muss mit dem value-Wechsel zusammenhängen, der durch Javascript zustande kommt. Ich finde einfach keine Lösung...

2. Oben in der Leiste: Die beiden Buttons "Login" und "Registrieren" sind im Firefox 1 oder 2 Pixel weiter oben, als im Chrome/Internet Explorer. Woran liegt das? Kann man das überhaupt beheben?

Vielen Dank im Voraus!

[Malcolm Beck´s]

હેલો

1. Wenn man oben in der Leiste auf das Passwort-Feld klickt, verschiebt sich der Inhalt dort um einen Pixel nach links. Das muss mit dem value-Wechsel zusammenhängen, der durch Javascript zustande kommt. Ich finde einfach keine Lösung...

Weil da ein input-Element mit value bei klick durch ein input-Element ohne Value ausgetauscht wird. Das eigentliche Feld ist auf display:none, wenn du dann da rein klickst, wird es auf display:inline gesetzt, daher der Fehler. Es müsste display:inline-block; sein, dann ginge es vermutlich (kann man durch das Javascript-Gefrickel nicht wirklich testen).

Du solltest dir Firebug ansehen. Browser haben heutzutage zwar viel OnBoard, aber Firebug ist das Original. Wenn du das kannst, kannste alle.

બાય

[Fabian]

Es müsste display:inline-block; sein, dann ginge es vermutlich (kann man durch das Javascript-Gefrickel nicht wirklich testen).

Ok, habe das geändert. Jetzt bewegt sich nur noch das Passwort-Feld um 1 Pixel. Es liegt nicht am Value, das habe ich bereits ausprobiert. Das mit der 1-Pixel Verschiebung ist in jedem Browser so. Noch eine Idee?

[Malcolm Beck´s]

હેલો

Ok, habe das geändert. Jetzt bewegt sich nur noch das Passwort-Feld um 1 Pixel. Es liegt nicht am Value, das habe ich bereits ausprobiert. Das mit der 1-Pixel Verschiebung ist in jedem Browser so. Noch eine Idee?

Das war eigentlich kein Lösungsvorschlag. Die bessere Lösung wäre, dass ganze zu entfernen. Die meisten neuen Browser können placeholder, dass sollte doch reichen? Und die, die es nicht können ... irgendwer bleibt immer auf der Strecke. In diesem Fall ist es nicht weiter schlimm.

બાય

[Gunnar Bittersmann]

@@Malcolm Beck´s:

nuqneH

Die meisten neuen Browser können placeholder

Was kein Ersatz für Labels ist!

... irgendwer bleibt immer auf der Strecke. In diesem Fall ist es nicht weiter schlimm.

Bei Fomularfeldbeschrifungen, die bei Eingaben verschwinden, bleiben die Nutzer auf der Strecke. Ich find das schon schlimm.

Qapla'

[Malcolm Beck´s]

હેલો

Die meisten neuen Browser können placeholder

Was kein Ersatz für Labels ist!

Wäre mir niemals in den Sinn kommen, gegenteiliges zu behaupten. Label muss, placeholder ist Luxus.

Bei Fomularfeldbeschrifungen, die bei Eingaben verschwinden, bleiben die Nutzer auf der Strecke. Ich find das schon schlimm.

Was genau passiert da? Ich dachte, Browser, die placeholder nicht können, können es nicht? Und User, die mit einem Browser surfen, der es nicht kann, sterben doch auch allmählich aus?

બાય

[martachen]

Hallo,

Bei Fomularfeldbeschrifungen, die bei Eingaben verschwinden, bleiben die Nutzer auf der Strecke. Ich find das schon schlimm.

Was genau passiert da? Ich dachte, Browser, die placeholder nicht können, können es nicht? Und User, die mit einem Browser surfen, der es nicht kann, sterben doch auch allmählich aus?

Ich glaub Gunnar meinte, dass wenn Labels fehlen und man nur Placeholder als Informationsträger hat, die User auf der Strecke bleiben, da sie in dem Moment wo sie auf das Eingabefeld klicken jeglich Information verloren haben, was eigentlich in das feld soll (einen Moment abgelenkt und schon weiß man nicht mehr was rein soll) und Nutzer mit alten austerbenden Browser haben die Information gar nicht

Wobei bei einem einfachen Login würd eich jetzt auch nicht so vehement gegen placeholder wettern. Es sind nur 2 Felder, die bei vielen durch gespeicherte Passwörter eh automatisch ausgefüllt sind  bzw man es grade noch so auf die reihe kriegt links benutzername und rechts passwort einzugeben

martachen

[Steel]

Moin!

Wobei bei einem einfachen Login würd eich jetzt auch nicht so vehement gegen placeholder wettern. Es sind nur 2 Felder, die bei vielen durch gespeicherte Passwörter eh automatisch ausgefüllt sind  bzw man es grade noch so auf die reihe kriegt links benutzername und rechts passwort einzugeben

Sehe ich persoenlich eigentlich genauso. Aber wies nunmal so ist: Die reale Welt hat nichts mit der in meinem Kopf gemeinsam. Die Post z.b. hat bei ihrer Postleitzahlensuche auch nur Placeholder. Trotzdem sehe ich immer wieder, dass Kollegen die Felder vertauschen. "Ich kann die Postleitzahl nicht finden!" Sogar wenn das Postleitzahlenfeld z.B. gar nicht ausgefuellt ist und man den Placeholder noch lesen kann. Eigentlich sollte man dann ja auf die Idee kommen, dass in das Feld wo man grad die PLZ stehen hat was anderes (Der Ort) reingehoert. Nicht in der realen Welt.

[Fabian]

Die Diskussion mag ja spannend sein, aber hat denn keiner eine Idee, wieso sich die Box um 1 Pixel verschiebt? Ich finde einfach nichts dazu...

[Fabian]

Vielleicht liegt es an meinem merkwürdigen CSS von den Input Boxen?

ul.loginbereich{  
margin-top:7px;  
float:right;  
margin-right:20px;  
}  
  
ul.loginbereich li{  
margin-left:2px;  
display:inline-block;  
}

[MudGuard]

Hi,

1. Wenn man oben in der Leiste auf das Passwort-Feld klickt, verschiebt sich der Inhalt dort um einen Pixel nach links.

Es müßten 2 Pixel sein.

Weil da ein input-Element mit value bei klick durch ein input-Element ohne Value ausgetauscht wird. Das eigentliche Feld ist auf display:none, wenn du dann da rein klickst, wird es auf display:inline gesetzt, daher der Fehler.

Ja, und das ausgetauschte input befindet sich ein li weiter.
Für die li sind 2px linker margin gesetzt.

Je nachdem, welches input angezeigt wird, kommt einmal mehr der linke margin von den li hinzu.

Wobei die li an der Stelle ziemlich unsinnig sind, da deren parent-Element ein fieldset (und nicht eine Liste) ist.

Die einfachste Lösung sollte sein, auf das zweite input-Feld und den Austausch zu verzichten.

cu,
Andreas

[Fabian]

Hallo Andreas, diesen Post habe ich leider übersehen. Tausend Dank! Es liegt natürlich tatsächlich am <li>, das ja nicht versteckt wird. Ich habe aus den 2 <li>´s einfach 1 <li> gemacht, jetzt funktioniert alles wunderbar... Super!

Vielen Dank an alle Helfer :-)