Unterschiedliche Darstellung - Windows/Mac

[Bernd]

Moin,

wie kann es sein, dass ich unter Windows eine andere Design-Ansicht habe als unter Mac. Wird CSS unterschiedlich berechnet?

Hier die Ansicht unter Windows wo alles fein aussschaut

Ansicht unter Mac wo es um ein paar Pixel verschoben ist

Ich sehe gerade auch die Buttons haben unterschiedliche Abstände. Hmm!

[Glaskugelinterpreter]

Wird CSS unterschiedlich berechnet?

Ich vermute mal eine andere Default-Schriftgröße für das Element in welchem sich Deine Buttons und der Abstand zwischen dem ersten ersten Button und der linken Seitengrenze befinden. (Der ist doch in rem oder em formuliert - oder?)

Die Schriftgröße der Buttons ist übrigens auch unterschiedlich.

[Bernd]

Das ganze hat folgendes CSS

#btn_ap {
    display: inline-block;
    background: #dadada;
    border: none;
    color: #777;
    width: 15%;
    margin-top: 2%;
    cursor: pointer;
    padding: 1%;
    margin-left: 15.2em;
}

[Glaskugelinterpreter]

margin-left: 15.2em;

Dazu keine Angabe der Font-Size. Wie schon gesagt kann die vom Default-CSS des Browsers gesetzt werden, was hier zufällig beim Vergleich unter Windows vers. Mac zu Tage trat.

• Bieten Deine Entwickler-Tools keine Ansicht für das berechnete CSS mit Erbfolge an?
• Die Maße prinzipiell in rem statt em anzugeben wäre unter diesem Aspekt "weniger stressig".

[Rolf B]

Hallo Bernd,

das ganze...

sicherlich nicht. Mit der einen Regel stylest du nicht das ganze Form. Und das Problem entsteht aus dem Zusammenspiel aller Regeln, die für diesen Teil greifen. So kann man nur raten, aber nicht helfen.

Versuch mal das Problem so klein wie möglich in einem Codepen oder jsFiddle zu reproduzieren. Vermutlich fällt dir die Lösung dabei schon selbst auf, und wenn nicht, können wir dann genauer gucken wo es hakt.

Rolf

[Bernd]

:o die ganze Datei hat mittlerweile knapp 8.000 Zeilen Code. Da muss ich erst schauen wie ich das Form da raus bekomme um zu schauen ob ich dieses irgendwie zu Codepan bekomme.

[marctrix]

Hej Bernd,

:o die ganze Datei hat mittlerweile knapp 8.000 Zeilen Code.

Das wird das Problem sein…

Marc

[Der Martin]

Hallo,

wie kann es sein, dass ich unter Windows eine andere Design-Ansicht habe als unter Mac. Wird CSS unterschiedlich berechnet?

ja, sehr wahrscheinlich. Eine Webseite sieht auf unterschiedlichen Systemen immer ein bisschen unterschiedlich aus. Da spielen viele Dinge mit hinein:
Bildschirmauflösung, verfügbare Schriften, Basis-Schriftgröße des Systems, Fähigkeiten des verwendeten Browsers, individuelle Einstellungen ...

Ansicht unter Mac wo es um ein paar Pixel verschoben ist

Du meinst die Position der Beschriftung auf den Buttons? Wahrscheinlich hat dein Mac-Browser ein etwas anderes Default-Stylesheet. Welche Eigenschaften legst du denn fest? Wie sieht dein Stylesheet für diese Elemente aus?

Ich sehe gerade auch die Buttons haben unterschiedliche Abstände. Hmm!

Definierst du vielleicht Abstände, margins oder paddings relativ zur Schriftgröße (in em)? Dann können solche kleinen Abweichungen leicht entstehen.

Ciao,
 Martin

[Bernd]

Du meinst die Position der Beschriftung auf den Buttons? Wahrscheinlich hat dein Mac-Browser ein etwas anderes Default-Stylesheet. Welche Eigenschaften legst du denn fest? Wie sieht dein Stylesheet für diese Elemente aus?

Die Beschriftung der Buttons ist das eine, damit könnte ich fast noch leben. Aber schau mal beide Bilder an und achte auf den Abstand vom ersten Button nach links. Unter Windows sitzt er schön unter dem Dropdown unter Mac ist er viel weiter nach links geschoben.

margin-left: 15.2em;

das wird unter beiden System anderes berechnet.

[Der Martin]

Hi,

margin-left: 15.2em;

das wird unter beiden System anderes berechnet.

natürlich, denn "em" ist eine Einheit, die von den Proportionen der verwendeten Schrift abhängig ist. Windows und Mac haben nun mal verschiedene Schriften.

Und dann hast du wahrscheinlich den Wert so lange justiert, bis es bei 15.2em "zufällig" gepasst hat. Zufällig, weil das auf jedem anderen System wieder etwas anders hinkommt.

So long,
 Martin

[Bernd]

Und dann hast du wahrscheinlich den Wert so lange justiert, bis es bei 15.2em "zufällig" gepasst hat. Zufällig, weil das auf jedem anderen System wieder etwas anders hinkommt.

Da muss ich dir leider zustimmen, ich habe so lange gespielt biss es auf meinem Laptop unter Windows richtig schick aussah :/ Jetzt habe ich den scheiß.

Also auf REM umsteigen, richtig?

[Der Martin]

Hallo,

Und dann hast du wahrscheinlich den Wert so lange justiert, bis es bei 15.2em "zufällig" gepasst hat. Zufällig, weil das auf jedem anderen System wieder etwas anders hinkommt.

Da muss ich dir leider zustimmen, ich habe so lange gespielt biss es auf meinem Laptop unter Windows richtig schick aussah :/ Jetzt habe ich den scheiß.

;-)

Also auf REM umsteigen, richtig?

Ist mir nicht so geläufig, aber das ist ja auch eine schriftabhängige Einheit. Dann eher schon Prozent, das bezieht sich auf die Maße des Elternelements und ist von der Schrift unabhängig.

Die spannende Frage ist aber doch: Auf welche Weist hast du die Eingabefelder über den Buttons positioniert? Kannst du nicht genau die gleiche Methode bei den Buttons anwenden?

So long,
 Martin

[Bernd]

Hallo,

Die spannende Frage ist aber doch: Auf welche Weist hast du die Eingabefelder über den Buttons positioniert? Kannst du nicht genau die gleiche Methode bei den Buttons anwenden?

die anderen Felder ordne ich so an

<div class="textfeld">
  <label for="event">Projekt *</label>
  <input type="text" name="event" id="event" value="">
</div>

Und das dazugehörige CSS

.textfeld label {
    display: inline-block;
    width: 25%;
    margin-top: 10px;
}

.textfeld input, textarea, select {
    width: 40%;
    display: inline-block;
    padding: 4px;
    border: 1px solid #d4d4d4;
    margin-top: 10px;
}

Du hast recht, ich könnte um die Buttons auch einfach ein DIV mit der Klasse textfeld legen, dann könnte das Problem behoben sein. Denn diese stehen vom Abstand und Anordnung in jedem Browser und unter Windows / Mac gleich aus.

[Der Martin]

Moin,

<div class="textfeld">
  <label for="event">Projekt *</label>
  <input type="text" name="event" id="event" value="">
</div>

.textfeld label {
    display: inline-block;
    width: 25%;
    margin-top: 10px;
}

.textfeld input, textarea, select {
    width: 40%;
    display: inline-block;
    padding: 4px;
    border: 1px solid #d4d4d4;
    margin-top: 10px;
}

Du hast recht, ich könnte um die Buttons auch einfach ein DIV mit der Klasse textfeld legen

nein, das würde dir nichts nützen, weil du im Block mit den Buttons kein label-Element hast, das 25% der Breite ausmacht. Aber warum gibst du nicht genau die 25% dem ersten Button als margin-left (anstatt der geheimnisvollen 15.2em)?

Ciao,
 Martin

[Rolf B]

Hallo Martin,

nein, das würde dir nichts nützen, weil du im Block mit den Buttons kein label-Element hast,

das könnte man ja einfügen. Aber ich stimme Dir zu - ein Label ohne Inhalt ist unnötiges Markup.

Die richtige Lösung sollte sein, dass die Breite des Labels und der linke Margin des ersten Buttons in der gleichen Einheit angegeben sein sollten, also entweder 25% oder 15em. Angesichts der geringen Breite des Label-Inhaltes würde ich em wählen, und zwar einen geringeren Wert als 15. Der Abstand ist für mein Empfinden zu groß.

Die weitere Frage ist, ob der Bedarf besteht, das Form auf einem Mobilgerät anzuzeigen. Gunnar würde jetzt sagen: Definitiv, aber das ist Gunnar. Bernd kennt seine Anwender und dürfte dazu eine eigene Meinung haben.

Wenn es Mobilbedarf gibt, müsste man ggf. noch was am Markup oder CSS tun.

Rolf

[marctrix]

Hej Rolf,

nein, das würde dir nichts nützen, weil du im Block mit den Buttons kein label-Element hast,

das könnte man ja einfügen. Aber ich stimme Dir zu - ein Label ohne Inhalt ist unnötiges Markup.

Die richtige Lösung sollte sein, dass die Breite des Labels und der linke Margin des ersten Buttons in der gleichen Einheit angegeben sein sollten, also entweder 25% oder 15em. Angesichts der geringen Breite des Label-Inhaltes würde ich em wählen, und zwar einen geringeren Wert als 15. Der Abstand ist für mein Empfinden zu groß.

Die Probleme sind grundlegendere: wie gesagt sind magic numbers ein Problem (egal ob die Einheit dahinter em, rem, % oder sonst was ist).

Beschriftungen gehören über Eingabefelder.

Absenden-Button (auch wenn "weiter" drauf steht) gehören rechts unter das formular usw…

Das nur für künftige Leser, nicht dass sich daran jemand ein Beispiel nimmt.

Marc

[Rolf B]

Hallo marctrix,

Beschriftungen gehören über Eingabefelder.

Das ist Geschmackssache. Für eine Mobilansicht ist das richtig, für eine Desktop-Ansicht eher nicht. Das klassische Layout von Formularen und Desktop-Anwendungen ist eigentlich so, dass Beschriftungen links neben den Feldern stehen.

Rolf

[marctrix]

Hej Rolf,

Beschriftungen gehören über Eingabefelder.

Das ist Geschmackssache.

Nein, das ist objektiv die beste Darstellung für alle Nutzer. Alle anderen Varianten haben Nachteile, insbesondere bei extremen Vergrößerungen.

Marc

[Der Martin]

Hallo Marc,

Beschriftungen gehören über Eingabefelder.

Das ist Geschmackssache.

Nein, das ist objektiv die beste Darstellung für alle Nutzer.

du meintest: Der beste für alle Nutzer akzeptable Kompromiss.

Mir sind zum Beispiel Beschriftungen lieber, die links neben dem Eingabefeld stehen, weil ich es jahrzehntelang so gewöhnt bin. Vorausgeswetzt, der Abstand zwischen Beschriftung und Eingabefeld ist nicht zu groß (das sagte dedlfix ja schon).
Obwohl man sich in diesem Fall auch mit optischen Mitteln behelfen könnte. Horizontale Linien etwa. Oder Zebrastreifen, also zwei Hintergrundfarben, die sich zeilenweise abwechseln.

So long,
 Martin

[marctrix]

Hej Der Martin,

Beschriftungen gehören über Eingabefelder.

Das ist Geschmackssache.

Nein, das ist objektiv die beste Darstellung für alle Nutzer.

du meintest: Der beste für alle Nutzer akzeptable Kompromiss.

Mir scheint, der einzig mögliche, denn du sagst ja selber:

Mir sind zum Beispiel Beschriftungen lieber, die links neben dem Eingabefeld stehen, weil ich es jahrzehntelang so gewöhnt bin.

Das ist subjektiv.

Vorausgeswetzt, der Abstand zwischen Beschriftung und Eingabefeld ist nicht zu groß (das sagte dedlfix ja schon).

Und das lässt sich objektiv belegen.

Wenn man Zoomen muss, wird der Abstand zwischen dem kürzesten label und dem Eingabefeld unter Umständen so groß, dass es nicht mehr möglich ist, label und input gleichzeitig im Viewport zu haben.

Marc

[Bernd]

Angesichts der geringen Breite des Label-Inhaltes würde ich em wählen, und zwar einen geringeren Wert als 15. Der Abstand ist für mein Empfinden zu groß.

Das sieht nur auf dem Bild so auf, weil darunter und darüber noch andere Felder kommen, die eine längere Bezeichnung haben. Und ich möchte dass die Bezeichnungen alle in einer Zeile stehen und nicht umbrechen. Deshalb habe ich so eine Breite genommen.

Auf Handy Nutzer nehme ich hier eine Rücksicht. Die Zielgruppe sind Behörden und Firma. Die machen ihre Bestellungen über den PC während der Arbeit.

[Bernd]

Warum kann ich nach 6 Minuten meinen Beitrag nicht mehr bearbeiten? In der alten Version hatte man eine längeren Spielraum?

[dedlfix]

Tach!

Angesichts der geringen Breite des Label-Inhaltes würde ich em wählen, und zwar einen geringeren Wert als 15. Der Abstand ist für mein Empfinden zu groß.

Das sieht nur auf dem Bild so auf, weil darunter und darüber noch andere Felder kommen, die eine längere Bezeichnung haben. Und ich möchte dass die Bezeichnungen alle in einer Zeile stehen und nicht umbrechen. Deshalb habe ich so eine Breite genommen.

Das Problem an solchen Darstellungen ist, dass mit zunehmendem Abstand auch die Koordination schwieriger wird, welches Label nun zu welchem Eingabefeld gehört. Optisch sieht es so aus, dass die Labels links einen Block bilden und die Eigabefelder rechts einen weiteren. Die Beziehungsstruktur ist aber nicht so, dass die Labels zusammengehören und die Eingabefelder eine weitere Gruppe bilden, sondern dass jedes Eingabefeld sein eigenes Label hat. Es ist sinnvoller, diese Beziehung auch optisch so darzustellen, also dass das Label in unmittelbarer Nähe des Eingabefeldes zu finden ist, und man nicht erst (übertrieben gesagt) ein Lineal anlegen muss, um die Zeilen zu verfolgen. Das Label direkt über das Eingabefeld zu setzen, sollte für den Nutzer angenehmer sein. Und ein wenig Abstand zum vorhergehenden Block lassen, damit man nicht das nachfolgende Label mit dem vorstehenden Eingabefeld assoziiert.

dedlfix.

[marctrix]

Hej Der Martin,

Ich sehe gerade auch die Buttons haben unterschiedliche Abstände. Hmm!

Definierst du vielleicht Abstände, margins oder paddings relativ zur Schriftgröße (in em)? Dann können solche kleinen Abweichungen leicht entstehen.

Magic numbers sind das Problem, nicht die Lösung.

Marc

[marctrix]

Hej Bernd,

Ich sehe gerade auch die Buttons haben unterschiedliche Abstände

Um Elemente auf einem Grid auszurichten gibt es in css genau eine Technik: css Grid.

Marc

[Bernd]

Hallo,

ich habe gelernt css Grid geht in alten Browsern nicht. Und wie mehrfach erwähnt habe ich Besucher die noch uralte System haben und ich diese auf keinen Fall verlieren möchte weil dieses mein Untergang wäre. Also muss ich alternativen suchen.