zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Seltsames Zeilenabstand-Problem im Firefox

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.06.2016, 06:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2016
Beiträge: 7
CM-Online befindet sich auf einem aufstrebenden Ast
Standard Seltsames Zeilenabstand-Problem im Firefox

Ich versuche gerade, ein Webdesign Template auf meine Bedürfnisse anzupassen. Dabei war eine riesige CSS-Datei, die ich schon teils reduziert habe, die aber immer noch sehr groß und unübersichtlich ist.

Ich habe aber vom Layout her alles soweit ganz gut anpassen können. Nur habe ich leider ein seltsames Problem mit den Zeilenabständen:

Im Safari sieht alles aus, wie ich es erwarte. Aber im Firefox (Verison 47), habe ich komischerweise Unregelmäßigkeiten. Hier ein Beispiel:

http://www.bef<löschmich>und.net/site/artikel.php?id=111

Einmal habe ich einen ungewöhnlich großen Abstand nach einer H3-Überschrift ("Thrombosefrühzeichen") (siehe erster Screenshot) und dann mehrmals innerhalb eines Textabsatzes einen zu großen Abstand vor der letzten Zeile (siehe zweiter Screenshot).

In Safari tritt das wie gesagt nicht auf.

Den Zeilenabstand habe ich für die Klasse "text-black-thin", sowie auch generell für die Seite auf 1.5 gestellt. Ich habe schon viel rumprobiert, aber ich kriege dieses Problem einfach nicht gelöst.

Screenshot 1:


Screenshot 2:



Würde mich sehr über Vorschläge freuen, wie dieses Problem zu lösen sein könnte!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.06.2016, 09:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.013
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Bevor du dich mit diesen Zeilenabständen beschäftigst solltest du dich um valides HTML kümmern. Dein Element mti der Klasse text-black-thin ist ein span und ein span darf keine Block-Elemente wie h2 etc. beinhalten. Das tut es aber bei dir und da kann nicht vorhergesagt werden, wie die Browser das interpretieren. Auch solltest du deinen Text in Absätze (p-Elemente) packen. Ist das behoben kann man sich dem Problem mit den Abständen anschauen. Abstände werden übrigens nicht nur durch line-height sondern auch durch margin/padding erzeugt.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.06.2016, 09:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.066
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Der Quelltext ist falsch. Dadurch fehlen den Browsern wichtige Erkennungsmöglichkeiten und Strukturen. Dass einige Browser den Quelltext wie von dir erwartet anzeigen ist einfach nur Glück.

Einige Beispiele:

Code:
...
<h1>Tiefe Beinvenenthrombose</h1>
<span class="text-black-thin offset-top-22">
...
</span>
...
Nach diesem span-Element folgen Text und weitere Überschriften bevor es wieder geschlossen wird. Innerhalb von span-Elementen dürfen aber keine sogenannten Blockelemente stehen.

Blockelemente sind zum Beispiel h1, h2, bis h6, p, ul, ol, li, dl, dt, dd und viele andere. Das span-Element kann durch ein div-Element ersetzt werden.

Außerdem sehe ich keinen Grund das h1-Element außerhalb des neuen div-Containers zu platzieren:

Code:
...
<div class="text-black-thin offset-top-22">
<h1>Tiefe Beinvenenthrombose</h1>
...
</div>
...
br-Element:

Code:
<br/>
br-Elemente sind nicht dazu gedacht Abstände zu erzeugen. Sie sollen nur dort einfache Zeilenumbrüche erzeugen, wo Blockelemente verboten sind. In dem Quelltext sind alle br-Elemente falsch verwendet worden und sollten gelöscht werden.

Code:
Klassische Symptome der tiefen Beinvenenthrombose sind: <br/>
- &Ouml;dem (Schwellung / Wassereinlagerung)<br/>
- Schmerz<br/>
- Spannungsgef&uuml;hl<br/>
- Zyanose (bl&auml;uliche Verf&auml;rbung der Haut)<br/>
<br/>
Jedoch bleibt eine TVT bei bettl&auml;grigen Patienten h&auml;ufig asymptomatisch, was die Diagnose erschwert.
Für solche Aufzählungen sollten Listenelemente verwendet werden, die Striche werden durch CSS erzeugt:

Code:
<p>Klassische Symptome der tiefen Beinvenenthrombose sind:</p>
<ul>
   <li>&Ouml;dem (Schwellung / Wassereinlagerung)</li>
   <li>Schmerz</li>
   <li>Spannungsgef&uuml;hl</li>
   <li>Zyanose (bl&auml;uliche Verf&auml;rbung der Haut)</li>
</ul>
<p>Jedoch bleibt eine TVT bei bettl&auml;grigen Patienten h&auml;ufig asymptomatisch, was die Diagnose erschwert.</p>
Text muss in geeigneten Elementen stehen. Für Fließtext sind p-Elemente vorgesehen. Also statt

Code:
Thrombosen kommen generell geh&auml;uft bei &auml;lteren Patienten vor. Grund ist oft <b>Bewegungsmangel bzw. Bettl&auml;grigkeit</b>. Auch durch die <b>Immobilisation nach Operationen</b> werden Thrombosen beg&uuml;nstigt, dann auch bei j&uuml;ngeren Patienten.
<br/><br/>
Desweitern sind <b>Rauchen und die Einnahme von hormonellen Kontrazeptiva</b> ("die Pille"), vor allem in Kombination, wesentliche Risikofaktoren. <br/><br/>
ist korrekt

Code:
<p>Thrombosen kommen generell geh&auml;uft bei &auml;lteren Patienten vor. Grund ist oft <b>Bewegungsmangel bzw. Bettl&auml;grigkeit</b>. Auch durch die <b>Immobilisation nach Operationen</b> werden Thrombosen beg&uuml;nstigt, dann auch bei j&uuml;ngeren Patienten.</p>
<p>Desweitern sind <b>Rauchen und die Einnahme von hormonellen Kontrazeptiva</b> ("die Pille"), vor allem in Kombination, wesentliche Risikofaktoren.</p>
Da UTF-8 verwendet wird sollte auch auf die Maskierung von Umlauten verzichtet werden, so dass der bereinigte Quelltext folgendermaßen aussehen sollte:

Code:
<p>Thrombosen kommen generell gehäuft bei älteren Patienten vor. Grund ist oft <b>Bewegungsmangel bzw. Bettlägrigkeit</b>. Auch durch die <b>Immobilisation nach Operationen</b> werden Thrombosen begünstigt, dann auch bei jüngeren Patienten.</p>
<p>Desweitern sind <b>Rauchen und die Einnahme von hormonellen Kontrazeptiva</b> ("die Pille"), vor allem in Kombination, wesentliche Risikofaktoren.</p>
Mit header, nav und footer habe ich mich nicht beschäftigt. Die sollten auch auf solche grundsätzlichen Fehler hin untersucht und korrigiert werden.

Nachdem der Quelltext korrigert ist kann das CSS angepasst werden.

Gruss

MrMurphy

Geändert von MrMurphy (22.06.2016 um 10:17 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 22.06.2016, 22:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2016
Beiträge: 7
CM-Online befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank euch beiden für die ausführliche Hilfe!

Ich habe den Code entsprechend angepasst und das ursprüngliche Problem besteht jetzt nicht mehr.

Danke auch für den Hinweis mit der Umlaut-Codierung! Daran arbeite ich. Die Daten sind leider nicht UTF-8 codiert in der MySQL Datenbank. Wenn ich sie einfach so ausgebe, bekomme ich statt der Umlaute nur "?" angezeigt. Wenn ich den Text vorher mit "htmlspecialletters()" bearbeite, dann kommen eben diese Escape-Zeichen raus. Da finde ich aber denke ich noch eine Lösung.

Was jetzt ein Problem ist, bei dem ich momentan ratlos bin, ist, dass nach h3-Überschriften der Abstand nach unten sehr groß ist und ich finde einfach nicht heraus, wo das in der CSS-Datei so kodiert ist Habe überall wo ich es im Zusammenhang mit h3 gefunden habe, die "margin-bottom" runtergesetzt, aber irgendwie tut sich da nichts
Mit Zitat antworten
  #5 (permalink)  
Alt 23.06.2016, 03:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.066
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Habe überall wo ich es im Zusammenhang mit h3 gefunden habe, die "margin-bottom" runtergesetzt, aber irgendwie tut sich da nichts
Das Vorgehen ist auch nicht empfehlenswert. Zumal nicht die h3-Elemente sondern die p-Elemente direkt nach den h3-Elementen den Abstand erzeugen.

Zunächst solltest du noch einige Änderungen im Quelltext vornehmen:

1.

Ändere alle

Code:
<p class="text-black-thin">
in

Code:
<p>
Es ist sachlich falsch jedes p-Element mit immer der gleichen Klasse auszustatten. Der HTML-Quelltext soll möglichst einfach gehalten werden.

2.

Ändere alle

Code:
<li>- Text
in

Code:
<li>Text
Also - und Leerzeichen löschen.

3.

Ändere

Code:
<ul>
   <li><b>Payr-Zeichen</b>: Druck auf die Fu&szlig;sohne f&uuml;hrt, insbesondere auf der Innenseite, zu Schmerzen.</li>
   <li><b>Meyer-Zeichen</b>: Kompression der Wadenmuskulatur f&uuml;hrt zu Schmerzen.</li>
   <li><b>Sigg-Zeichen</b>: &Uuml;berstreckung des Beines im Kniegelenk f&uuml;hrt zu Schmerzen.</li>
   <li><b>Lowenberg-Zeichen</b>: Eine Blutdruckmanschette wird um die Wade gelegt und aufgepumpt. Am betroffenen Bein f&uuml;hrt dies im Gegensatz zum gesunden Bein zu Schmerzen.</li>
   <li><b>Lisker-Zeichen</b>: Druck auf die Schienbeinvorderkante f&uuml;hrt zu Schmerzen in der Wadenmuskulatur.</li>
</ul>
in

Code:
<dl>
   <dt>Payr-Zeichen:</dt>
   <dd>Druck auf die Fu&szlig;sohne f&uuml;hrt, insbesondere auf der Innenseite, zu Schmerzen.</dd>
   <dt>Meyer-Zeichen:</dt>
   <dd>Kompression der Wadenmuskulatur f&uuml;hrt zu Schmerzen.</dd>
   <dt>Sigg-Zeichen:</dt>
   <dd>&Uuml;berstreckung des Beines im Kniegelenk f&uuml;hrt zu Schmerzen.</dd>
   <dt>Lowenberg-Zeichen:</dt>
   <dd>Eine Blutdruckmanschette wird um die Wade gelegt und aufgepumpt. Am betroffenen Bein f&uuml;hrt dies im Gegensatz zum gesunden Bein zu Schmerzen.</dd>
   <dt>Lisker-Zeichen:</dt>
   <dd>Druck auf die Schienbeinvorderkante f&uuml;hrt zu Schmerzen in der Wadenmuskulatur.</dd>
</dl>
da das dl-Element mit den dt- und dd-Elemtenten hier sachlich korrekt ist.

Im gesamten Quelltext von

Code:
<h1>Tiefe Beinvenenthrombose</h1>
bis

Code:
Man spricht auch vom "postthrombotischen Syndrom".</p>
sollten jetzt keine Klassen mehr vorkommen.

Jetzt zum CSS

In CSS-Dateien zu Templates und Frameworks sollten keine Änderungen vorgenommen werden. Statt dessen wird eine zusätzliche CSS-Datei erstellt, zum Beispiel mit dem Namen "mycss.css". Diese Datei wird nach den bestehenden CSS-Dateien im head-Bereich eingebunden.

1. Erweitere

Zitat:
<link rel="stylesheet" href="css/style.css">
zu

Zitat:
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mycss.css">
2.

Erstelle im css-Verzeichnis eine neue Datei mit dem Namen "mycss.css". Am wenigsten Probleme (zum Beispiel mit den Zeichensatz) macht es, eine vorhandene css-Datei umzubenennen und den Inhalt zu löschen.

In die neue css-Datei kommen die css-Anweisungen, die angepasst werden sollen.

Als sinnvoll hat sich erwiesen dazu dem nächstgelegenen Container einen Klassennamen zu geben, der dann für die CSS-Anweisungen übernommen wird. Ich habe die Klasse "fachtext" genannt.

Das hat den Vorteil, dass jeder Container mit der Klasse Fachtext gleich gestaltet wird. Das damit erstellte Layout kann also auch für andere Seiten verwendet werden.

Also:

3.

Erweitere das div

Code:
<div class="inset-md-right-15 shift-up-sm-10">
vor der h1-Überschrift zu

Code:
<div class="inset-md-right-15 shift-up-sm-10 fachtext">
Füge in die mycss.css folgende Anweisungen hinein:

Code:
@charset "UTF-8";

   @media all {
      .fachtext h1 {
         margin: 12px 0;
      }
      .fachtext h2 {
         margin: 12px 0;
      }
      .fachtext h3 {
         margin: 12px 0;
      }
      .fachtext p {
         margin: 12px 0;
      }
      .fachtext ul {
         margin: 12px 0;
      }
      .fachtext li {
         margin: 5px 0;
      }
      .fachtext li:before {
         content: "- ";
      }
      .fachtext dl {
         display: flex;
         flex-wrap: wrap;
      }
      .fachtext dt {
         font-weight: bold;
         margin: 12px 0 0 0;
         flex: 0 0 160px;
      }
      .fachtext dd {
         margin: 12px 0 0 0;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: calc(100% - 160px);
      }
   }
und schau dir das Ergebnis an. Die Abstände sollten schon deutlich besser passen.

Die Einträge kannst du jetzt ändern oder erweitern. Das Prinzip sollte mehr oder weniger selbsterklärend sein.

Gruss

MrMurphy
Mit Zitat antworten
  #6 (permalink)  
Alt 23.06.2016, 05:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2016
Beiträge: 7
CM-Online befindet sich auf einem aufstrebenden Ast
Standard

Nochmals vielen vielen Dank!
Das hat mir sehr weitergeholfen!

Sag bescheid, falls ich mich irgendwie dafür revanchieren kann!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Firefox - negativer z-index und generated content? shredder01 CSS 2 10.03.2011 15:29
Synchroner XMLHttpRequest und Firefox reagiert nicht mehr kristian Javascript & Ajax 3 05.08.2008 17:10
text-decoration: none; wird nur im Firefox angezeigt und seltsames verschieben ViktorR CSS 8 25.12.2006 14:23
Firefox 1.5 Beta 1 Pablo Offtopic 19 13.09.2005 19:56
Bitte testen mit Firefox und IE (Vergleich!) Spider Site- und Layoutcheck 8 23.09.2004 23:38


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:14 Uhr.