|
|||
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! |
Sponsored Links |
|
|||
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.
|
Sponsored Links |
|
|||
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> ... 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> ... Code:
<br/> Code:
Klassische Symptome der tiefen Beinvenenthrombose sind: <br/> - Ödem (Schwellung / Wassereinlagerung)<br/> - Schmerz<br/> - Spannungsgefühl<br/> - Zyanose (bläuliche Verfärbung der Haut)<br/> <br/> Jedoch bleibt eine TVT bei bettlägrigen Patienten häufig asymptomatisch, was die Diagnose erschwert. Code:
<p>Klassische Symptome der tiefen Beinvenenthrombose sind:</p> <ul> <li>Ödem (Schwellung / Wassereinlagerung)</li> <li>Schmerz</li> <li>Spannungsgefühl</li> <li>Zyanose (bläuliche Verfärbung der Haut)</li> </ul> <p>Jedoch bleibt eine TVT bei bettlägrigen Patienten häufig asymptomatisch, was die Diagnose erschwert.</p> Code:
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. <br/><br/> Desweitern sind <b>Rauchen und die Einnahme von hormonellen Kontrazeptiva</b> ("die Pille"), vor allem in Kombination, wesentliche Risikofaktoren. <br/><br/> 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> 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> Nachdem der Quelltext korrigert ist kann das CSS angepasst werden. Gruss MrMurphy Geändert von MrMurphy (22.06.2016 um 10:17 Uhr) |
|
|||
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 |
|
|||
Hallo
Zitat:
Zunächst solltest du noch einige Änderungen im Quelltext vornehmen: 1. Ändere alle Code:
<p class="text-black-thin"> Code:
<p> 2. Ändere alle Code:
<li>- Text Code:
<li>Text 3. Ändere Code:
<ul> <li><b>Payr-Zeichen</b>: Druck auf die Fußsohne führt, insbesondere auf der Innenseite, zu Schmerzen.</li> <li><b>Meyer-Zeichen</b>: Kompression der Wadenmuskulatur führt zu Schmerzen.</li> <li><b>Sigg-Zeichen</b>: Überstreckung des Beines im Kniegelenk führt zu Schmerzen.</li> <li><b>Lowenberg-Zeichen</b>: Eine Blutdruckmanschette wird um die Wade gelegt und aufgepumpt. Am betroffenen Bein führt dies im Gegensatz zum gesunden Bein zu Schmerzen.</li> <li><b>Lisker-Zeichen</b>: Druck auf die Schienbeinvorderkante führt zu Schmerzen in der Wadenmuskulatur.</li> </ul> Code:
<dl> <dt>Payr-Zeichen:</dt> <dd>Druck auf die Fußsohne führt, insbesondere auf der Innenseite, zu Schmerzen.</dd> <dt>Meyer-Zeichen:</dt> <dd>Kompression der Wadenmuskulatur führt zu Schmerzen.</dd> <dt>Sigg-Zeichen:</dt> <dd>Überstreckung des Beines im Kniegelenk führt zu Schmerzen.</dd> <dt>Lowenberg-Zeichen:</dt> <dd>Eine Blutdruckmanschette wird um die Wade gelegt und aufgepumpt. Am betroffenen Bein führt dies im Gegensatz zum gesunden Bein zu Schmerzen.</dd> <dt>Lisker-Zeichen:</dt> <dd>Druck auf die Schienbeinvorderkante führt zu Schmerzen in der Wadenmuskulatur.</dd> </dl> Im gesamten Quelltext von Code:
<h1>Tiefe Beinvenenthrombose</h1> Code:
Man spricht auch vom "postthrombotischen Syndrom".</p> 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:
Zitat:
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"> Code:
<div class="inset-md-right-15 shift-up-sm-10 fachtext"> 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); } } Die Einträge kannst du jetzt ändern oder erweitern. Das Prinzip sollte mehr oder weniger selbsterklärend sein. Gruss MrMurphy |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |