0 votes
in SoSci Survey (dt.) by s157182 (260 points)

Hallo zusammen,

Ich präsentiere in meinem Experiment 6 Bilder nebeneinander, die mit einem Abstand von 10px zueinander dargestellt werden sollen. In allen Browsern funktioniert dies auch, nur im Internet Explorer werden die Bilder direkt nebeneinander abgebildet (bzw. überlappen sich die Bilder, wenn man im Punkt Darstellung die Pixelanzahl reduziert). Auch wenn man die Pixel erhöht, verändert sich nichts...

Ich habe einen Fragetyp "Horizontale Auswahl" ausgewählt (weil die Bilder angeklickt werden müssen) und bei der Eingabe folgenden Code eingefügt (6x):

<center> <img src="%Bild1%" width="142" height="214" alt="" style="margin-right: 10px"> </center><br> <br> <br> <br> <center> Ja, war dabei</center>

Wenn man die gesamte Pixelanzahl der Graphik erhöht unter Darstellung, dann ziehen sich die Bilder auseinander, aber dann ist der Abstand in den anderen Browsern zu groß...
Ich habe das Gefühl, dass Internet Explorer den Term "margin-right" nicht erkennt... Gibt es dafür eine Alternative?

Vielen Dank!

by s109993 (9.7k points)
EIn Hinweis zum center tag, auch wenn das (wahrscheinlich) nicht das Problem lösen wird. Center ist outdated und wird nicht mehr empfohlen:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

Margin right wird vom Internet Explorer unterstützt:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right

1 Answer

0 votes
by SoSci Survey (302k points)

Ein Bild <img> ist wie ein Buchstabe ein "Inline-Element". Eventuell müssen Sie noch ein display: block; ergänzen, um auchd en IE zum Rahmen zu überreden. Aber ich kann mich nur dem o.g. Kommentar anschließen: Der oben stehende HTML-Code ist nicht optimal.

Der Abstand bei einer honrizontalen Auswahl sollte besser direkt über die Auswahlelemente und ggf. ein wenig CSS-Code gesteuert werden. Das Bild sollte sich automatisch anpassen, wenn jemand den Fragebogen auf einem kleineren Bildschirm ausfüllt. Das könnte etwa so aussehen:

<div style="width: 142px; max-width: 100%; margin: 0 auto; padding: 0 5px; text-align: center;">
  <div style="margin-bottom: 30px;">
    <img src="%Bild1%" alt="" style="max-width: 100%;">
  </div>
  Ja, war dabei
</div>
asked Oct 14, 2021 in SoSci Survey (dt.) by s157182 (260 points) Bilder sind nun im IE kleiner

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...