Unterschiedliche Wirkung von <hr>

[Gerhard]

Hallo,

in meiner Anwendung wirkt sich <hr> nicht aus.
Dann habe ich es in JSFiddle versucht , und dort erscheint eine schwarze Trennlinie.
Woran kann dies liegen?

[MudGuard]

Hi,

in meiner Anwendung wirkt sich <hr> nicht aus.
Dann habe ich es in JSFiddle versucht , und dort erscheint eine schwarze Trennlinie.
Woran kann dies liegen?

am CSS.

Genaueres kann man bei den wenigen gelieferten Informationen nicht sagen.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Woran kann dies liegen?

am CSS.

Bist du dir da sicher? Ich hätte eine andere Ursache vermutet. 🤪

Jolan tru

[Matthias Scharwies]

Servus!

Hallo,

in meiner Anwendung wirkt sich <hr> nicht aus.

Du hast deinen Post mit dem tag CSS versehen - findet sich dort etwas?

Dann habe ich es in JSFiddle versucht , und dort erscheint eine schwarze Trennlinie.

Woran kann dies liegen?

• HTML/Tutorials/Seitenstrukturierung Thematischer_Bruch_mit_hr

• Simple Styles for <hr>'s (css-tricks.com)

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Gerhard,

Was ergibt denn die forensische Betrachtung mit den Entwicklerwerkzeugen deines Browsers?

• ist es wirklich hr? Oder vielleicht br, mdr oder gar zdf?

Ahem, räusper... 😉

• ist das hr im DOM dort, wo du es erwartest?
• welche Styles gelten für das Element?
• wird es von anderen Elementen visuell überlagert?
• befindet es sich vielleicht in einem versteckten Elternelement?

Rolf

[Gerhard]

In meinem css ist kein hr definiert.
wie es in dem JSFiddle aussieht, weiß ich nicht.

[Gunnar Bittersmann]

@@Gerhard

In meinem css ist kein hr definiert.
wie es in dem JSFiddle aussieht, weiß ich nicht.

Wir auch nicht.

Kommen da noch mehr Informationen von dir oder können wir den Thread wegen Unsinnigkeit löschen?

Jolan tru

[Rolf B]

Lieber Gerhard,

es ist fast 19 Jahre her, dass die erste Glaskugel ihren Weg in die Zitatesammlung fand. Und obwohl ich Auges Empfehlung gefolgt bin und auf Kristall umgerüstet habe, ist es mir nicht möglich, dein Problem zu erraten.

Ich habe Dir Suchhinweise gegeben, insbesondere die Entwicklerwerkzeuge des Browsers.

Wenn Du nicht weißt, wie man damit umgeht, dann haben wir hier ein paar erste Schritte. Würdest Du uns deine Seite zugänglich machen, dann würden wir ebenfalls die Entwicklerwerkzeuge nutzen, um dem Problem näher zu kommen. Das kannst oder willst Du nicht - okay, das ist dann so. Aber deine Antworten zeigen auch nicht, dass Du den gegebenen Hinweisen folgst.

wie es in dem JSFiddle aussieht, weiß ich nicht.

Wie soll ich das jetzt verstehen? Du hast das Fiddle selbst erstellt und solltest dann auch wissen, was Du reingeschrieben hast.

In meinem css ist kein hr definiert.

Es muss keine Regel für ein hr Element da sein, damit CSS das hr anderweit versteckt. Das habe ich Dir schon dargelegt. HTML Syntaxfehler können ebenfalls eine Ursache sein, z.B.

<div>Hallo</div
<hr>
<img src="/foo.png" alt='bla bla Bild">
<hr>

<div>Hallo</div>
<hr>
<img src="/foo.png" alt="bla bla Bild">
<hr>

Wobei das unpaarige Anführungszeichen noch ganz andere Katastrophen auslösen würde und vermutlich nicht der Fehler ist.

Aber deswegen sagte ich Dir: Schau mit den Entwicklerwerkzeugen nach, ob das hr im DOM dort steht, wo Du es erwartest. Genauer: Ob das Ergebnis des HTML Parsers – das DOM eben – dem entspricht, was Du mit HTML formulieren wolltest.

Hast Du das getan?

Und wenn Du irgendwas von unseren Antworten nicht verstehst, frag nach und geh nicht stumpf drüber weg. Sonst sind am Ende nur alle angepisst und Dir wurde nicht geholfen.

Rolf

[Gerhard]

Zitat aus meinem Eingangsbeitrag:

in meiner Anwendung wirkt sich <hr> nicht aus.

Dann habe ich es in JSFiddle versucht , und dort erscheint eine schwarze Trennlinie.

Und oben:

In meinem css ist kein hr definiert.

wie es in dem JSFiddle aussieht, weiß ich nicht.

Letzteres bedeutet, dass ich nicht weiß, ob in JDFiddle CSS-Voreinstellungen zu <hr> vorhanden sind.

Damit Spekulationen über "falsche Stelle, ist es wirklich hr? Oder vielleicht br, mdr oder gar zdf?" aufhören, habe ich

dies und nur dies

<p>Hier ist ein Abschnitt zu Ende.</p>

<hr>

<p>Und hier beginnt etwas Neues ohne eigene Überschrift.</p>

in JSFiddle und als

<html>
<p>Hier ist ein Abschnitt zu Ende.</p>

<hr>

<p>Und hier beginnt etwas Neues ohne eigene Überschrift.</p>
</html>

im Internet getestet - mit dem gleichen unterschiedlichen Ergebnis.

Auf Grund einiger Antworten, die davon ausgehen, dass ich (Dipl.Math.) blöd bin und nicht unterscheiden kann, ob ich br oder zdf geschrieben habe, oder die meinen, ich hätte meine Version und die JSFiddle-Version nicht (nicht x-mal) auf Tippfehler untersucht, gebe ich auf und verpasse dem hr-tag eine Eigenschaft im CSS.

Tschüs

[Der Martin]

Hi,

Zitat aus meinem Eingangsbeitrag:

in meiner Anwendung wirkt sich <hr> nicht aus. Dann habe ich es in JSFiddle versucht , und dort erscheint eine schwarze Trennlinie.

sooo, und dann wäre doch der naheliegende Schritt bei der Frage: Da ist mein Real-Beispiel (Link), und da ist mein Fiddle (Link). Könnte sich das mal bitte jemand anschauen und mir die entscheidenden Unterschiede aufzeigen?

Damit Spekulationen über "falsche Stelle, ist es wirklich hr? Oder vielleicht br, mdr oder gar zdf?" aufhören, ...

Okay, das war ein kleiner sarkastischer Exkurs von Rolf, sorry.

Auf Grund einiger Antworten, die davon ausgehen, dass ich (Dipl.Math.) blöd bin

Ich will mir hier kein Urteil über deine Bildung oder Intelligenz erlauben - ich stelle nur fest: Erklären ist nicht deine Stärke. Was du bis jetzt geliefert hast, ist etwa soviel wie "Auch wenn ich das Fenster zumache, zieht's bei mir im Wohnzimmer. Bei meinem Nachbarn ist das nicht so. Warum?"

Jeder Fensterbauer würde hier antworten: Kann ich mal vorbeikommen und mir das vor Ort ansehen (→Online-Beispiel)? Alles andere ist Spekulatius - und die mag ich doch gar nicht.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Gerhard

in meiner Anwendung wirkt sich <hr> nicht aus. Dann habe ich es in JSFiddle versucht , und dort erscheint eine schwarze Trennlinie.

Zeig jetzt bloß nicht deine Anwendung und auch nicht dein Fiddle, sonst könnten wir dir womöglich weiterhelfen!

Letzteres bedeutet, dass ich nicht weiß, ob in JDFiddle CSS-Voreinstellungen zu <hr> vorhanden sind.

Da kann ich dich beruhigen (oder beunruhigt dich das?): Nein, das sollte nicht der Fall sein. Alles Styling der hr stammt von dir allein.

Jolan tru

[JürgenB]

Hallo,

<html>
<p>Hier ist ein Abschnitt zu Ende.</p>

<hr>

<p>Und hier beginnt etwas Neues ohne eigene Überschrift.</p>
</html>

sieht bei mir so aus:

Gruß
Jürgen

[Raketenwilli]

Auf Grund einiger Antworten, die davon ausgehen, dass ich (Dipl.Math.) blöd bin und nicht unterscheiden kann, ob ich br oder zdf geschrieben habe,

Das hat mit dem Beruf, dem Diplom oder gar einem Doktor- oder Professorentitel rein gar nichts zu tun und es ist bei Weitem nicht so, dass man jemanden durch eine Vermutung eines unentdeckten Tippfehlers für „blöd“ halte.

Menschen machen Fehler und über die Frage, wieso eine völlig beliebige Person so häufig das liest, was diese tippen wollte, statt das, was selbige getippt hat, gibt es etliche Aufsätze von Psychologen, Augenärzten und Neurologen. Und alle sagen. „Hm. Der Tippfehler mag blöd anmuten, ihn nicht zu finden mag noch blöder erscheinen, aber über die Intelligenz des scheinbar versagenden Menschen lässt sich daraus absolut nichts herleiten.“

Problematisch allerdings, dass Du Hilfe suchts und bei denen, die den Fehler suchen, vermutest, dass diese Dich „anpissen“ wollen. Dem ist aber nicht so. Den Lesern Deiner Beschwerde mutet Deine Reaktion ungewöhnlich, jedenfalls nicht als „wünschenswert“ und schon gar nicht als „zielführend“ an. Vorliegend wird es aber so sein, dass diese als Ursache Dein „Genervtsein“ wegen der Nichtanzeige der Linie und also der fehlenden Lösung für das eben nur scheinbar triviale Problem ist.

Zu Deinem Test:

Sprichwörtlich augenscheinlich wird bei meinem (eigentlich unnötigen) Test mit Deinem Quelltext die Linie gezeigt:

https://home.fastix.org/Tests/hr-test.html

(Ich verschwende hierfür keinen Platz für ein Bildschirmfoto.)

Demnach ist mit mathematischer Genauigkeit folgende Aussage zu treffen:

• Es liegt nicht am gezeigten HTML-Quellcode.

Woran dann?

Das kann ich nicht wissen. Du schreibst:

„und als ... im Internet getestet“

Als Mathematiker weißt Du, dass „das Internet“ eine große Menge ist, das Problem tritt - Beweis hier - nur in einer Teilmenge auf. Demnach muss diese Teilmenge besondere Eigenschaften haben.

Und das kann soviel sein, dass eine Glaskugel nicht reicht:

1. Die Daten (das HTML) können beim Transport auf den Webserver verändert oder ergänzt werden.
2. Die Daten (das HTML) der Webseite können beim Aussenden durch den Webserver verändert oder ergänzt werden.
3. Die Daten (das HTML) der Webseite können auf dem Transportweg zum Client verändert oder ergänzt werden.
4. Die Daten (das HTML) der Webseite können vor der Darstellung in Deinem Browser verändert oder ergänzt werden.

Beispielsfall für 2.: Der Webserver kann zu einer Webseite Daten hinzufügen, oder statt die Seite einfach auszuliefern, diese z.B. durch ein Programm verändern.

Beispielsfall für 4.: Schon mal was von „ad-blocker“ gehört? Die verändern auch die Webseite.

Du bist diplomierter Mathe-Gott, ich bin nur ein, aus formalen Gründen von solchen als „blöd“ angesehener Serverfuzzi der 450€ für einen Tag verlangt. Und ich schreibe Dir jetzt mit anderen Worten, aber dem selben Aussagekern, die gleiche Forderung:

Um die Ursache des von Dir geschilderten Problems a) sehen und b) die möglichen Ursachen eingrenzen zu können brauchen wir geeigneten Input, also ein Online-Beispiel, bei dem das Problem auftritt.

Denn wenn man zweimal das Gleiche tut und unterschiedliche Ergebnisse hat, dann hat man entweder nicht zweimal das Gleiche getan - oder aber wesentliche Umstände sind anders. Die willst Du doch finden? Oder?

[Raketenwilli]

1. Die Daten (das HTML) können beim Transport auf den Webserver verändert oder ergänzt werden.
2. Die Daten (das HTML) der Webseite können beim Aussenden durch den Webserver verändert oder ergänzt werden.
3. Die Daten (das HTML) der Webseite können auf dem Transportweg zum Client verändert oder ergänzt werden.
4. Die Daten (das HTML) der Webseite können vor der Darstellung in Deinem Browser verändert oder ergänzt werden.

5. Im Fiddle siehst Du den Strich, sonst nicht. Das kann auch folgende Ursache haben: Der „Grafiktreiber“(¹) Deines Gerätes und der Browser „verschlucken“ sich, wenn diese Unterstriche, Linien & Co., in einigen Schriftgrößen durch den nicht gerade unbeteiligten Bildschirm darstellen lassen wollen. Da ist in mehreren Vorgängen ziemlich viel trivial anmutende „+-*/" - Mathematik im Spiel und es wird schließlich mit ganzen Zahlen (Pixel - also Speicheradressen, Farbwerten) gerechnet, also auch gerundet. Das hatte ich vor langer Zeit auch mal - und das Problem trat nicht nur bei zu kleinen Größen auf, sondern quasi mittendrin.

Hast Du schonmal die Anzeigegröße verändert? (Das geht häufig mit den Tastenkombinationen [STRG]+[+]; [STRG]+[-]; [STRG]+[0].) Erscheint die Linie dann?

Wenn das Ursache des Problems sein sollte, gibt es keine wirkliche Lösung…

¹) Da ist mehr als nur ein „Treiber“ beteiligt…

[Rolf B]

Hallo Raketenwilli,

Wenn das Ursache des Problems sein sollte, gibt es keine wirkliche Lösung…

Doch, schon. Ein hr ist letztlich nichts weiter als

hr {
    display: block;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    unicode-bidi: isolate;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}

Heißt: Man kann mit border-width oder height nachhelfen und den Strich stärker zu machen, wenn es zu Rundungsfehlern kommt. Ich nehme an, dass Gerhard genau das getan hat und es geholfen hat, denn er schrieb ja, dass er mit einer CSS-Eigenschaft weitermachen würde.

Möglicherweise ein Problem der Kombi von Retina-Bildschirm und Google Chrome - der hat mich schon einige Male mit eigenwilligem Runden genervt.

Rolf

[Gerhard]

Nichts dergleichen.

[Der Martin]

Mahlzeit,

Nichts dergleichen.

sorry, mit diesem knappen, informationsfreien Stil können wir dir leider nicht helfen.

Wenn du dir Hilfe versprichst, musst du schon eine Basis liefern.
Wenigstens eine Problembeschreibung, die auch ein bisschen Substanz enthält - noch besser, ein Online-Beispiel "zum Anfassen".

Einen schönen Tag noch
 Martin

[Raketenwilli]

Sowas liegt häufig an Tippfehlern. Eine gute Idee ist es, bei solchen „unerklärlichen Fehlern“ das HTML zu prüfen (und zu reaparieren)

https://validator.w3.org/

Der Hintergrund ist, dass die Browser versuchen, Fehler zu umgehen. Was dabei herauskommt entspricht aber oft nicht den Vorstellungen desjenigen, der die Webseite „baut“.

Für das CSS gibt es auch sowas:

https://jigsaw.w3.org/css-validator/

Für letzteres gilt, dass es die Fehler nennt, aber die Browsertools bieten da einen hohen Mehrwert. Nur eben mit einer Fülle von Informationen, welche möglicherweise zu einer Unübersikchtlichkeit führen: Man sucht die Nadel im Heuhaufen und bekommt statt dessen einen anderen Heuhaufen mit derselben Nadel.