Zeilenüberlappung bei margin-top mit negativem Wert

c.weber.os · #1 (**permalink**) 14.10.2005, 13:25

Liebe Leute,
ich habe { margin-top:-1em } eingesetzt, um Absätze ohne Leerzeile erzeugen zu können. Im IE gibt es bei der Darstellung keine Probleme, aber in Firefox und Netscape kommt es teilweise zu Überlappungen. Habt ihr Lösungsvorschläge?
Gruß

ulle · #2 (**permalink**) 14.10.2005, 13:31

Code:

p {
    margin: 0;
}

c.weber.os · #3 (**permalink**) 14.10.2005, 13:49

klappt leider nicht; dann habe ich nämlich wieder eine Leerzeile zwischen den Absätzen

fricca · #4 (**permalink**) 14.10.2005, 13:56

Quelltext?

c.weber.os · #5 (**permalink**) 14.10.2005, 18:24

naja, was heißt Quelltext; es handelt sich hier einfach um eine Definition in einer zentralen .css-Datei, die auf entsprechende classes in beliebigen mit dieser Datei verlinkten Quelltexten, welche sich in einer sql-Datenbank befinden, Anwendung findet. Beispiel:
______________________________
p.kurz { margin-top:-1em }
______________________________

FließtextFließtextFließtextFließtextFließtextFließ textFließtext
FließtextFließtextFließtextFließtextFließtextFließ textFließtext</p>
<p class="kurz">NächsterAbsatzNächsterAbsatzNächsterAbsatz
NächsterAbsatzNächsterAbsatzNächsterAbsatzNächster Absatz</p>
______________________________

Hier ist es also nun so, daß im IE "NächsterAbsatz" sauber ohne Leerzeile unter "Fließtext" steht, während im Firefox wie auch bei Netscape gelegentlich(!) die erste Zeile von "NächsterAbsatz" die letzte Zeile von "Fließtext" überlappt.

fricca · #6 (**permalink**) 14.10.2005, 18:38

Zitat:

naja, was heißt Quelltext

Quelltext heißt: poste einen Quelltext, der dein Problem nachvollziehbar macht. Zusammenhanglose Code-Schnipsel genügen dafür nicht.

Negativer margin-top erzeugt eine Überlappung - warum wundert dich das?
Dein Schnipsel lässt nicht erkennen, ob du etwas gegen die unterschiedlichen Default-Randabstände der Browser unternommen hast.
Wenn du nicht weißt, was ich meine, dann benutz die Suchfunktion mit "Universalselektor".

c.weber.os · #7 (**permalink**) 15.10.2005, 02:20

Hallo fricca und die anderen,

nun dann also hier zunächst der Code für die Datei format.css

__________________________________________________ _____
h1 { font-family:Times New Roman; font-size:22pt; font-weight:bold; padding-top:10pt }
h2 { font-family:Times New Roman; font-size:19pt; font-weight:bold; padding-top:8pt }
h3 { font-family:Times New Roman; font-size:16pt; font-weight:bold; padding-top:6pt }
h4 { font-family:Times New Roman; font-size:14pt; font-weight:bold; padding-top:4pt }
h5 { font-family:Times New Roman; font-size:12pt; font-weight:bold; padding-top:2pt }
h6 { font-family:Times New Roman; font-size:10pt; font-weight:bold }
p { font-family:Times New Roman; font-size:12pt; text-indent:30pt }
p.start { text-indent:0pt }
p.start:first-letter { font-family:Courier New; font-size:25pt; font-weight:bold }
p.links { text-indent:0pt }
p.kurz { margin-top:-1em }
p.kurzundklein { margin-top:-1em; font-size: 80% }
p.kleinundlinks { font-size: 80%; text-indent:0pt }
p.kurzkleinlinks { margin-top:-1em; font-size: 80%; text-indent:0pt }
p.lang { margin-top:2em }
p.xlang { margin-top:3em }
a:link { color:#FF0000; }
a:visited { color:#0000FF; font-weight:bold; text-decoration:none }
a:hover { color:#FF00FF; font-weight:bold; text-decoration:none }
a:active { color:#00FF00; font-weight:bold; text-decoration:none }
blockquote { margin-left:100pt }
q { font-style:italic }
em { font-style:italic }
cite { font-style:italic }
strong { font-weight:bold }
*.center { text-align:center; text-indent:0pt }
*.right { text-align:right }
*.small { font-size:80% }
*.large { font-size:120% }
*.xlarge { font-size:140% }
*.underl { text-decoration:underline }
*.undcent { text-align:center; text-decoration:underline }
*.uitrgt { text-align:right; font-style:italic; text-decoration:underline }
*.beleg { text-align:right; font-style:italic }
__________________________________________________ ______

und nun eine html-Datei:

__________________________________________________ ______
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Robert Kurz: Du bist billig, Deutschland</title>
<link rel="stylesheet" type="text/css"
href="format.css">
</head>
<body>
<p class="beleg">erschienen
im Neuen Deutschland

am 30.09.2005</p>
<h2>Robert Kurz</h2>
<h1>DU BIST BILLIG, DEUTSCHLAND</h1>
<p class="start">Der Sozialstaat wird
zerschlagen, die Löhne sinken, die Armut
steigt, die Angst grassiert, die Wut im Bauch wächst. Und die
Antwort? Eine mediale Seifenoper-Crew tritt die Mutter aller
PR-Kampagnen los: "Du bist Deutschland". Höre,
zwangsverpflichteter 1-Euro-Jobber, demnächst zum Schuhputzer
Degradierter: "Egal, welche Position du hast. Du hältst den
Laden zusammen. Du bist der Laden. Du bist 82 Millionen". Und noch eins
drauf: "Du bist Thyssen". Auf den ersten Blick könnte man an
ein Fake des Satire-Magazins "Titanic" glauben. Aber es ist eine
gemeinsame Realsatire von Springer, Burda, Bertelsmann, Spiegel, ARD,
FAZ, Premiere, Focus und weiteren Medienkonzernen, unterstützt
vom Großbäcker Kamps.</p>
<p class="kurz">Die Primitivität der
Botschaft verblüfft. Sie
hört sich an wie von intellektuellen Bildungsproletariern
für sekundäre Analphabeten verfasst: "Dein Wille ist
wie Feuer unterm Hintern. Er lässt deinen
Lieblingsstürmer schneller laufen und Schumi schneller
fahren...Gib nicht nur auf der Autobahn Gas. Geh runter von der Bremse.
Es gibt keine Geschwindigkeitsbegrenzung auf der Deutschlandbahn". Die
Adressaten sind offenbar jüngere männliche
Identitätsbüffel und Krisenverlierer im
fortgeschrittenen Zustand der Unzurechnungsfähigkeit,
gemeingefährliche Raser und bierselige Fans mit einem
Schuß von postmodernem Willen zur Autosuggestion.</p>
<p class="kurz">Nicht nur die
Primitivität verblüfft, sondern auch
die Schamlosigkeit. Der Sprachgestus erinnert an faschistische
Durchhalteparolen. Da ist sowohl Kalkül am Werk als auch die
Panik einer Flucht nach vorn. Während die Deutschland-AG real
ökonomisch abgewickelt wird, soll mitten im Hurrikan des
globalen Krisenkapitalismus die deutsche Volksgemeinschaft als
ideologische Not- und Zwangsgemeinschaft auferstehen.</p>
<p class="kurz">Zwar hätte es genauso
gut heißen können:
"Du bist blöd". Aber die professionellen Trendscouts kennen
ihre Pappenheimer. Sie haben mitgeschnitten, dass bis weit in die
gesellschaftliche Mitte hinein die Reaktion auf die Globalisierung
deutschnational statt sozial-emanzipatorisch ist. Sie haben von den
Erfolgen der NPD-Kampagne
"Laß dich nicht einmachen", der "Heuschrecken"-Brandrede von
Müntefering und der "Fremdarbeiter"-Hetze von Lafontaine
gelernt. Jetzt wollen die Konzerne selber mitzündeln und
rechts überholen. "Du bist Thyssen", das soll auch
heißen: "Thyssen ist du". Was die Philosophin Hannah Arendt
als Reaktion "von oben" auf die Weltwirtschaftskrise der
Zwischenkriegszeit beschrieben hatte, wird noch einmal ins Auge
gefasst: Das Bündnis der Elite mit dem Mob. Wenn es ans
Eingemachte geht, regredieren auch der Ingenieur und der Studienrat auf
das Niveau eines grölenden Fans.</p>
<p class="kurz">Im Stil einer Sekte wollen die
kapitalistischen Macher aus den
enterbten individualisierten Billiglöhnern die letzten
Reserven herausleiern: "Du bist wichtig. Bring die beste Leistung, zu
der du fähig bist". Dafür kriegst du zwar kein Geld
mehr, aber du darfst jetzt wieder die Flagge grüssen wie der
beschränkteste Pfadfinder. Im Unterschied zu den
Nazi-Propagandisten können die
"Du-bist-Deutschland"-Werbetexter allerdings nicht mit Kriegsbeute und
Weltherrschaft winken. Die Globalisierung ist irreversibel, die
transnationale Betriebswirtschaft nicht "heim ins Reich" zu holen.
Trotzdem wird das nationale Ventil geöffnet - nach innen,
nicht nach außen. Es ist nicht bloß die
Aufforderung zur Leistung ohne Lohn: "Machen wir uns die Hände
schmutzig. Du bist die Hand". Wenn die Zeit der Verzweiflung kommt,
dann geh nicht uns an die Kehle, sondern den Migranten, Asylbewerbern,
hier lebenden Ausländern. Und schuld sind sowieso die Juden.
Das ist der Subtext dieser Botschaft.</p>
</body>
</html>
__________________________________________________ ___________

Was meine Verwunderung über die Überlappung betrifft, so liegt der Grund dafür darin, daß ein Wert von -1em eigentlich nur die standardmäßig eingestellte Leerzeile zwischen zwei Absätzen entfernen sollte, und der IE stellt dies ja auch so da. Eine Überlappung mit der letzten Zeile des vorhergehenden Absatzes sollte doch erst bei einem Wert von -2em passieren.
Was die Sache mit den Default-Randabständen betrifft, so weiß ich tatsächlich nicht, was du meinst; ebenso kenne ich keine Suchfunktion mit Universalselektor.

Gruß

Boris · #8 (**permalink**) 15.10.2005, 02:31

Zitat:

daß ein Wert von -1em eigentlich nur die standardmäßig eingestellte Leerzeile zwischen zwei Absätzen entfernen sollte

Das macht man aber eher so:

p
{
margin: 0;
padding: 0;
}

Und nicht mit negativen Werten ...

fricca · #9 (**permalink**) 15.10.2005, 10:31

Zitat:

Zitat von c.weber.os

ebenso kenne ich keine Suchfunktion mit Universalselektor.

Schaust du hier ganz nach oben - Button: "Suchen"
Sehr nützliche Funktion

Die Einheit pt ist für Bildschirmdarstellung völlig ungeeignet.

c.weber.os · #10 (**permalink**) 15.10.2005, 13:58

@Boris: guter Tip, klappt auch ganz passabel, danke! Allerdings habe ich jetzt teilweise(!) wieder Leerzeilen zwischen den Absätzen, und zwar in allen Browsern. Darüber wundere ich mich ja nach wie vor am meisten, daß innerhalb ein und desselben Dokumentes völlig gleiche Befehle unterschiedlich ausgeführt werden... Gibt es vielleicht doch noch eine weitere Alternative, die auch zuverlässig und gleichbleibend ausgeführt wird?

@fricca: Das kann ich durchaus nachvollziehen, daß pt für die Bildschirmausgabe ungeeignet ist; nur gibt es nach allem, was ich jetzt gelesen habe, keine einzige universal einsetzbare Einheit (mir ist bekannt, daß nicht wenige Besucher der von mir gepflegten Website noch alte Browser wie z.B. Netscape 4.7 benutzen, so daß die Einheit em noch ungeeigneter ist als pt); dann müßte ich wohl unterschiedliche Einheiten für alle möglichen Browser und Ausgabemedien verwenden, und das ist mir im Augenblick einfach much too much...
Ich habe jetzt erst einmal alle Schriftgrößen einheitlich auf pt umgestellt und noch eine Nummer größer gemacht, damit das auf der von dir verlinkten Seite beschriebene Problem bei kleinen Schriften nicht eintritt. Aber mittelfristig werde ich mich sicherlich mit dem Diversifizieren von Definitionen für verschiedene Ausgabemedien und Browser beschäftigen müssen...

Gruß an alle

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Verschiebungen bei größerem Bildschirm	seelefant	CSS	4	28.07.2014 15:43
Navigation positionieren	maybebabe	CSS	4	08.04.2013 22:17
rahmen um bilder- was mache ich falsch?	R0sa	CSS	3	19.11.2012 16:35
Responsive webdesign: horizontales Menü mit angepasster Schriftgröße	Spencer	Javascript & Ajax	3	18.09.2012 23:16
joomla template	wrock	CSS	2	06.04.2012 19:24