CSS-Border wird automatisch angezeigt

Question

Guten Tag,

ich würde gerne ein Whats-App-Layout innerhalb meines Projekts verwenden. Dazu habe ich in meiner Frage den passenden HTML-Code und beim Punkt "Fragebogen zusammenstellen" innerhalb eines PHP-Code-Elements über "pageCSS()" den dazugehörigen CSS-Code eingebaut.
Der Code stammt von hier: https://codepen.io/swaibu/pen/QxJjwN

Mein Problem ist, dass ich in der Fragebogen-Vorschau plötzlich einen Rand (border) um die Nachrichten habe, der da eigentlich nicht sein sollte (siehe Bilder).

versus

Ich habe schon probiert, ihn explizit zu entfernen mit Hilfe von "border: none;" und "border-width: 0;", allerdings ohne Erfolg. Ich kriege ihn einfach nicht weg.

Ein weiteres Problem, welches für meine Zwecke aber nicht so wichtig sein sollte, ist, dass ich die folgende Fehlermeldung erhalte, wenn ich die Stellen mit den zwei Doppelpunkten (::) im CSS-Code behalte:

"Warnung: Die Zeichenkette :: wird als besonders gefährlich bewertet und darf daher im Fragebogen nicht verwendet werden. Falls es sich dabei um den Teil eines Textes handelt, können Sie diesen als Fragebogen-Text speichern und dann in den Fragebogen einbinden."

Ich wäre sehr dankbar, wenn mir weitergeholfen werden könnte. Vielleicht gibt es noch etwas, was ich übersehen habe oder eine andere Möglichkeit das Layout ohne die Ränder um die Nachrichten anzuzeigen.

Vielen Dank!

Comments

Was die :: angeht, umgehen Sie das bitte am einfachsten durch Auftrennen des Strings. Also

pageCSS('div:'.':hover') statt pageCSS('div::hover')

Alterantiv schreiben Sie den CSS-Code in ein Fragebogen-Layout und verwenden dieses mittels option('layout', ...) für die entsprechende Seite.

Das mit dem Rahmen bekommen wir auch noch hin. Posten Sie doch bitte mal einen Pretest-Link direkt (!) zur betroffenen Seite.

---

Vielen Dank für Ihre schnelle Hilfe!
Die ::-Problematik konnte ich dank Ihres Hinweises beheben.

Hier der gewünschte Pretest-Link wegen dem Problem mit den Rahmen:
https://www.soscisurvey.de/DaF_DaZ_Studie/?act=0xVPhAjYMDMSbCOlPjU698Qw

Herzlichen Dank für Ihre Mühe!

Answer 1

Der Rahmen stamm von dieser CSS-Regel:

div.message {
  width: 100%;
  padding: 6px;
  border: 1px solid #5273B9;
}

Die Klasse "message" wird auch von SoSci Survey verwendet, daher die Überschneidung. Es sollte reichen, wenn Sie die Regel überschreiben:

div.message {
  width: auto;
  padding: 8px;
  border: 0 none;
}

Comments

Vielen Dank für die schnelle Antwort!
Das wird garantiert die Lösung des Problems sein.

Würden Sie mir noch bitte verraten, wo ich die Regel von SoSci Survey finden und überschreiben kann?

---

Sie finden die Regel am einfachsten über die Tools Ihres Browsers: https://www.soscisurvey.de/help/doku.php/de:general:browser-tools

Überschreiben können Sie einfach mittels pageCSS(). CSS steht ja für *cascading* style sheet, heißt, wenn man eine neue Regel definiert kaskadiert diese über die alte.

---

Ah, okay! Jetzt habe ich es verstanden. Vielen herzlichen Dank für die Erklärung und die nette Hilfe.
Jetzt sieht auch alles so aus, wie ich es mir vorgestellt habe.