Firefox & Google Chrome - Uploadfeld

[Sturmverliebt]

Guten Morgen,

ich bin etwas verwundert, dass mein Uploadfeld unterschiedlich in den oben genannten Browsern dargestellt wird. Warum?

Chrome

Firefox

Mein HTML und CSS Code

  
<label for="titelbild">Bild wählen: </label>  
<input type="file" name="titelbild" id="bild"/>  

  
.tfeld {  
    margin: 15px 15px 10px 0;  
}  
  
.tfeld input[type="file"] {  
    background-color: #ffffff;  
    border: 0 solid #fff;  
    display: block;  
    padding: 4px 4px 4px 0;  
    width: 250px;  
}  
  
.tfeld label {  
    cursor: pointer;  
    float: left;  
    width: 150px;  
}  
  
fieldset label {  
    display: block;  
}  

[Der Martin]

Hallo,

ich bin etwas verwundert, dass mein Uploadfeld unterschiedlich in den oben genannten Browsern dargestellt wird. Warum?

das Styling von Formularelementen ist allgemein etwas kritisch; in manchen Browsern ist das bewusst eingeschränkt, damit Form Controls nicht bis zur Unkenntlichkeit entstellt werden.

Das gilt für ein File-Upload-Feld in besonderem Maß, da das sogar ein Sicherheitsrisiko darstellen kann. Ein solches Feld lässt sich daher kaum stylen, man muss es weitgehend so hinnehmen, wie es der Browser darstellt.

Ciao,
 Martin

[hotti]

Moin,

es gibt Alternativen, z.B. das Feld als Link zu stylen. Oder Drag&Drop.

MfG

[Sturmverliebt]

Hallo,

es gibt Alternativen, z.B. das Feld als Link zu stylen. Oder Drag&Drop.

Drag&Drop sehe ich auf immer mehr Seiten. Hab mich bis jetzt nicht wirklich an das Thema ran getraut, wüsste überhaupt nicht wie ich vorgehen soll (außer Google zu fragen). Allerdings was ist, wenn ein User mit einem alten sagen wir mal IE 8 / 9 kommt? Wird dieses dort schon unterstützt?

[Gunnar Bittersmann]

@@Sturmverliebt:

nuqneH

Allerdings was ist, wenn ein User mit einem alten sagen wir mal IE 8 / 9 kommt? Wird dieses dort schon unterstützt?

Wenn du den von mir zum Lesen empfohlenen Artikel gelesen hättest, wüsstest du, dass das völlig egal ist.

Qapla'

[Sturmverliebt]

Wenn du den von mir zum Lesen empfohlenen Artikel gelesen hättest, wüsstest du, dass das völlig egal ist.

Sorry warum sollte ich das lesen bzw. warum setzt du dieses voraus? Den Link hast du NICHT bei meinem Problem veröffentlicht. Außerdem ist dieses alles Englisch und ich HASSE Englisch.

[Gunnar Bittersmann]

@@Sturmverliebt:

nuqneH

Sorry warum sollte ich das lesen bzw. warum setzt du dieses voraus?

Meine Formulierung implizierte: Wenn du den Artikel noch nicht gelesen hast, lies ihn jetzt.

Außerdem ist dieses alles Englisch und ich HASSE Englisch.

Schlechte Voraussetzung für Webentwicklung.

Qapla'

PS. Du hasst Englisch, aber sagst „sorry“ statt „’tschuldigung“?

[Sturmverliebt]

Außerdem ist dieses alles Englisch und ich HASSE Englisch.

Schlechte Voraussetzung für Webentwicklung.

Möchte ich NIE machen. Meine Seite dient genau für diesen Zweck http://forum.de.selfhtml.org/?t=218286&m=1502455 mehr auch nicht.

PS. Du hasst Englisch, aber sagst „sorry“ statt „’tschuldigung“?

Ist einfacher zu schreiben.

[M.]

Mahlzeit,

Sorry warum sollte ich das lesen bzw. warum setzt du dieses voraus? Den Link hast du NICHT bei meinem Problem veröffentlicht. Außerdem ist dieses alles Englisch und ich HASSE Englisch.

Mal ganz wertfrei: Im Bereich Webentwicklung, Progammierung, Elektronik, Computertechnik usw. (also u.a. das was du machst) ist das ganz schlecht, denn entweder sind deutsche Docs veraltet (zumindest älter als die englischen) oder gar nicht vorhanden.
Kurz: Englisch gehört dazu sonst hängst du immer der Entwicklung hinter ;)

[Sturmverliebt]

Mal ganz wertfrei: Im Bereich Webentwicklung, Progammierung, Elektronik, Computertechnik usw. (also u.a. das was du machst) ist das ganz schlecht, denn entweder sind deutsche Docs veraltet (zumindest älter als die englischen) oder gar nicht vorhanden.
Kurz: Englisch gehört dazu sonst hängst du immer der Entwicklung hinter ;)

Dem gebe ich recht, aber was soll ich machen wenn ich es einfach nicht kann? Ich schau mir einfach deutsche Tutorials an bzw. lese deutsche Handbücher. Im schlimmsten Fall lass ich mir den ganzen Mist von Google übersetzten.

[M.]

Mahlzeit,

Dem gebe ich recht, aber was soll ich machen wenn ich es einfach nicht kann?

Ganz banal: lernen ;)
Es gibt nur wenige Menschen, die von Geburt an eine Sprache beherrschen :D

[hotti]

Hallo,

es gibt Alternativen, z.B. das Feld als Link zu stylen. Oder Drag&Drop.

Drag&Drop sehe ich auf immer mehr Seiten. Hab mich bis jetzt nicht wirklich an das Thema ran getraut, wüsste überhaupt nicht wie ich vorgehen soll (außer Google zu fragen). Allerdings was ist, wenn ein User mit einem alten sagen wir mal IE 8 / 9 kommt? Wird dieses dort schon unterstützt?

Guck Dir an, was derzeit auf dem Mozilla Developer Network (MDN) abgeht. Von Drag&Drop über die File-API zur komplexen Thematik FileUpload. Mit wenigen Zeilen Code ( hier ein Beispiel ) kannst Du damit Dinge realisieren, da ist ein IE8 weit entfernt davon, z.B.:

1. mehrere Drop-Areas wo User eine Grafik fallenlassen kann,
2. die Grafiken werden bereits im Bowser über <canvas> auf die gewünschte Pixelgröße skaliert,
3. Grafiken werden, ebenfalls über <canvas> auf ein einheitliches Dateiformat gebracht, z.B. .jpeg und dabei komprimiert,
4. alle Grafiken werden, ggf. zusammen mit Text in einem JS-Objekt gespeichert, ein User baut offline, vor dem eigentlichen Upload ersteinmal alles so zusammen wie er es gerne hätte (Hypermedia-Datei).

Für 1..4 brauchst Du ca. 25 Zeilen JS-Code. Und dann ein schlankes Upload mit komprimierten Bilddateien z.B. mit dem FormData-Objekt und einer Progressbar oder einem beliebigen anderen Throbber.

Ich denke, dass gerade die ewig gestrigen IE-Benutzer sich das mal anschauen sollten und Entwickler sollten noch viel mehr die Features moderner Browser aufgrund der richtungsweisenden und zukunfstorientierten Entwicklung im MDN einsetzen; dass Anwendungen endlich das tun, was sie sollen und zwar zeitgemäß sowie benutzerfreundlich, anstatt einen Großteil ihrer kostbaren Zeit darauf zu verschwenden, dass auf Biege und Breche bestimmte Sachen in ALLEN Browsern der Welt nur halbwegs funktionieren.

MfG

[M.]

Mahlzeit,

ich bin etwas verwundert, dass mein Uploadfeld unterschiedlich in den oben genannten Browsern dargestellt wird. Warum?

Es liegt an irgendwas. was du nicht zeigst. Bei mir im Chrome sieht das Upload-Feld aus wie bei dir im FF.

Ich stelle jetzt mal pauschal in den Raum, das umgebende Element ist zu schmal, deshalb bricht das Uploadfeld um. Nur so als Vermutung, denn Ränder stellen Browser immer noch unterschiedlich dar.

[Sturmverliebt]

Hallo,

Es liegt an irgendwas. was du nicht zeigst. Bei mir im Chrome sieht das Upload-Feld aus wie bei

Ich hab es mir mal etwas genauer angesehen und zwar dieser Bereich

  
.tfeld input[type="file"] {  
    background-color: #ffffff;  
    border: 0 solid #fff;  
    display: block;  
    padding: 4px 4px 4px 0;  
    width: 250px;  
}  

Wenn ich mein width auf 300px ändere passt es wieder. Aber es kann doch kaum sein, dass 50px Platzunterschied in beiden Browsern ist.

[M.]

Mahlzeit,

Wenn ich mein width auf 300px ändere passt es wieder. Aber es kann doch kaum sein, dass 50px Platzunterschied in beiden Browsern ist.

Im Chrome kannst du dir die Computed Styles in den Developer-Tools anzeigen lassen. dürfte im FF auch gehen. Vergleich doch mal da die Werte.

Ich bau immer Ränder um Elemente, dann sehe ich wo die Abstände sind.

[Gunnar Bittersmann]

@@M.:

nuqneH

Ich bau immer Ränder um Elemente, dann sehe ich wo die Abstände sind.

Wenn du damit 'border' meinst, die verändern Größe und Platzierung von Elementen. 'outline' sollte das nicht tun.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Ich bau immer Ränder um Elemente, dann sehe ich wo die Abstände sind.

Wenn du damit 'border' meinst, die verändern Größe und Platzierung von Elementen. 'outline' sollte das nicht tun.

Eine Hintergrundfarbe tut es ebenso.

Matthias

[Der Martin]

Hallo,

Ich bau immer Ränder um Elemente, dann sehe ich wo die Abstände sind.
Wenn du damit 'border' meinst, die verändern Größe und Platzierung von Elementen.

ja, mindestens mal um die Breite des Rahmens.

'outline' sollte das nicht tun.

Gute Idee, outline gehört bisher eigentlich noch nicht zu meinem aktiven Wortschatz.
Um mal eben die tatsächlichen Abmessungen eines Elements zu visualisieren, gebe ich ihm stattdessen gern eine auffällige Hintergrundfarbe.

Ciao,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

Ich bau immer Ränder um Elemente, dann sehe ich wo die Abstände sind.
Wenn du damit 'border' meinst, die verändern Größe und Platzierung von Elementen.

ja, mindestens mal um die Breite des Rahmens.

Und vor allem verhalten sich zusammenfallende margins anders.

Matthias

[M.]

Mahlzeit,

Wenn du damit 'border' meinst, die verändern Größe und Platzierung von Elementen. 'outline' sollte das nicht tun.

Wenn ich das nur fürs Debugging nutze und dann wieder entferne, ist das relativ egal.

[Sturmverliebt]

Guten Tag,

ist es möglich dieser Code Abschnitt bzw. darin das padding-left

  
.tfeld input[type="file"] {  
    background-color: #ffffff;  
    border: 0 solid #fff;  
    display: block;  
    padding: 4px 4px 4px 0;  
    width: 250px;  
}  

nur für den Google Chrome auf 149px zu erhöhen?

[Gunnar Bittersmann]

@@Sturmverliebt:

nuqneH

nur für den Google Chrome auf 149px zu erhöhen?

Nein.

Qapla'

[Sturmverliebt]

nur für den Google Chrome auf 149px zu erhöhen?

Nein.

AHA denkst DU also, hier wird etwas ANDERES geschrieben http://mynthon.net/howto/webdev/css-hacks-for-google-chrome.html kann es sein, dass du gerne falsche Infos raus gibst, weil du es selber nicht besser weißt?

[M.]

Mahlzeit,

AHA denkst DU also, hier wird etwas ANDERES geschrieben http://mynthon.net/howto/webdev/css-hacks-for-google-chrome.html kann es sein, dass du gerne falsche Infos raus gibst, weil du es selber nicht besser weißt?

Seine Aussage war absolut richtig, denn diese Seite schreibt ebenfalls, dss sich der hack auch auf Safari auswirkt, somit gibt es keine Möglichkeit, CSS NUR für Chrome zu ändern.

[M.]

Mahlzeit,

ist es möglich dieser Code Abschnitt bzw. darin das padding-left
nur für den Google Chrome auf 149px zu erhöhen?

Nur wenn du den Safari auch noch mitnehmen willst:

@media screen and (-webkit-min-device-pixel-ratio:0) {}

Wäre ja interessant ob dein Problem  auf im Safari auftritt.

[Sturmverliebt]

Hallo,

Wäre ja interessant ob dein Problem  auf im Safari auftritt.

ach du auf die MAC User kann ich verzichten. Sind in meinen Augen einfach nur Menschen die meinen dass diese etwas besseres sind weil sie ein MAC besitzen. Mir kommt es auf den IE / FF und Chrome an und im IE bis auf 7 runter. Auch wenn jetzt der Herr Bittersmann etwas anderes behauptet, für MICH ist dieses Browser noch SEHR wichtig!

[M.]

Mahlzeit,

ach du auf die MAC User kann ich verzichten. Sind in meinen Augen einfach nur Menschen die meinen dass diese etwas besseres sind weil sie ein MAC besitzen.

Ich mag angebissene Äpfel auch nicht, aber bedenke, dass auf jedem Telefon und tablet mit nem angebissenen Apfel per Default der Safari läuft. Das sind ne menge an potentieller Besucher.

Und wenn in deiner Zielgruppe der IE7 noch eingesetzt wird, musst du ihn berücksichtigen, unabhängig von jeder Statistik. Deine Seite entspricht ja dann nicht der Statistik ;)

[Sturmverliebt]

Ich mag angebissene Äpfel auch nicht, aber bedenke, dass auf jedem Telefon und tablet mit nem angebissenen Apfel per Default der Safari läuft. Das sind ne menge an potentieller Besucher.

Wie unten geschrieben die Seite NIE öffentlich gemacht wird, ist mir das komplett egal. Hab aber raus gefunden an was es liegt und zwar muss ich display: inline-block; verwenden, dann wird es mir im Google Chrome auch richtig angezeigt.

Und wenn in deiner Zielgruppe der IE7 noch eingesetzt wird, musst du ihn berücksichtigen, unabhängig von jeder Statistik. Deine Seite entspricht ja dann nicht der Statistik ;)

Richtig ;) meine Seite ist nur für den privaten Gebrauch um meinen Eltern / Großeltern Bilder zu zeigen. Mein Opa hat z.B. noch einen sehr alten Rechner mit einem sehr alten Betriebsystem. Und dieser Rechner wird auch kein Update bekommen, da er NICHT im Netz ist. Läuft also alles Lokal.

[Linuchs]

Mein Opa hat z.B. noch einen sehr alten Rechner mit einem sehr alten Betriebsystem. Und dieser Rechner wird auch kein Update bekommen, da er NICHT im Netz ist. Läuft also alles Lokal.

Kenne ich:

Linuchs

[Der Martin]

Hi,

Mein Opa hat z.B. noch einen sehr alten Rechner mit einem sehr alten Betriebsystem. Und dieser Rechner wird auch kein Update bekommen, da er NICHT im Netz ist. Läuft also alles Lokal.
Kenne ich:

wow, das ist ja schon die Version mit 10bit-Farbdisplay! ;-)

*scnr*
 Martin

[Gunnar Bittersmann]

@@Sturmverliebt:

nuqneH

ach du auf die MAC User kann ich verzichten. Sind in meinen Augen einfach nur Menschen die meinen dass diese etwas besseres sind weil sie ein MAC besitzen.

*prust* YMMD.

Mir kommt es auf den IE / FF und Chrome an und im IE bis auf 7 runter.

Öhm, du hast eine außergewöhnliche Zielgruppe?

Auch wenn jetzt der Herr Bittersmann etwas anderes behauptet, für MICH ist dieses Browser noch SEHR wichtig!

Du hast nicht verstanden.

Ich habe nichts anderes behauptet. Ich habe nicht gesagt, IrgendEin Browser wäre nicht wichtig, sondern habe gesagt, dass es völlig egal ist, ob ein Browser Drag-and-drop unterstützt.

Weil das progressive enhancement ist, was für unterstützende Browser zusätzlich bzw. anstatt der Basis-Funktionalität angeboten wird, die in jedem Browser funktioniert.

Qapla'

[Sturmverliebt]

Du hast nicht verstanden.

Ich habe nichts anderes behauptet. Ich habe nicht gesagt, IrgendEin Browser wäre nicht wichtig, sondern habe gesagt, dass es völlig egal ist, ob ein Browser Drag-and-drop unterstützt.

Weil das progressive enhancement ist, was für unterstützende Browser zusätzlich bzw. anstatt der Basis-Funktionalität angeboten wird, die in jedem Browser funktioniert.

Klinkt sehr interessant, heißt aber für mich ich habe doppelte Arbeit, richtig? Zum einen muss ich den herkömmlichen Upload einbauen wie er jetzt schon vorhanden ist und zum anderen den „neuen“ Der drag & drop upload könnte ich z.B. mit diesem oder diesem Script wohl umsetzten, aber lohnt sich der Aufwand? Ob ich jetzt etwas von einem Ordner in den Browser ziehe oder auf „Durchsuchen“ klicke kommt aufs gleiche raus?