nicht angemeldet
Darstellungsfehler in Mozilla und Netscape?
Hallo!
Ich kaue gerade an einem (kleinen) Darstellungsproblem in Mozilla (win1.4) und Netscape (win6.2 und höher) herum. Das Code-Beispiel (bzw. der relevante Auschnitt) steht unten und kann hier betrachtet werden:
Beispiel 1: http://www.polylog.org/trial/1/trial-div.htm
Beispiel 2: http://www.polylog.org/trial/1/trial-table.htm
Problem ist, dass Mozilla nicht den angegeben Abstand von 40px zwischen Ende der Anmerkungen und der Überschrift "Autor" einhält (=Beispiel 1). Setze ich den Abschnitt "Anmerkungen" in eine Tabelle (statt einem Div), funktioniert's (=Beispiel 2). IE (6.0) und Opera stellen es immer (halbwegs) korrekt dar.
Hat jemand eine Idee, an was das liegen könnte? Ist es ein kleiner Bug oder habe ich unsauberes HTML bzw. CSS fabriziert? Für jeden Tipp bin ich sehr dankbar.
Viele Grüße
Bertold Bernreuter
_________________________________________________
Hier der Code zum Problem (=Beispiel 1):
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Trial</title>
<style type="text/css">
<!--
body { background-color:#FFFFFF; color:#000000; min-width:610px; }
.AuthorAddress { font-family:Arial,Helvetica,Sans Serif; font-size:11px; font-style:normal; line-height:13px; width:423px; margin-top:10px; margin-bottom:50px; margin-left:187px; color:#666666; text-align:left; }
.AuthorInfo { font-family:Arial,Helvetica,Sans Serif; font-size:12px; color:#666666; line-height:15px; margin-left:25px; text-align:justify; }
.Bibliography { font-family:Arial,Helvetica,Sans Serif; font-size:12px; color:#666666; line-height:15px; margin-bottom:12px; margin-left:50px; text-align:justify; text-indent:-25px; }
.Center { text-align:center; }
.DivStandard { width:610px; margin-left:auto; margin-right:auto; clear:both; }
.HeadingThem { font-family:Arial,Helvetica,Sans Serif; font-size:16px; font-style:italic; font-weight:bold; color:#FFB643; margin-top:40px; margin-bottom:15px; text-align:left; }
.NotesPosition { width:610px; clear:both; }
.NotesLink { font-family:Arial,Helvetica,Sans Serif; font-size:11px; line-height:13px; background-color:#E8E6E2; }
.NotesNumber { font-family:Arial,Helvetica,Sans Serif; font-size:11px; float:left; clear:both; width:42px; margin-top:2px; margin-right:8px; text-align:right; }
.NotesText { font-family:Arial,Helvetica,Sans Serif; font-size:12px; color:#666666; line-height:15px; float:right; width:560px; margin-bottom:12px; text-align:justify; }
.TableStandard { width:610px; margin-left:auto; margin-right:auto; border-spacing:0px; border-style:none; padding:0px; empty-cells:show; }
-->
</style>
</head>
<body>
<div class="Center">
<!--start bibliography-->
<div class="DivStandard">
<h3 class="HeadingThem"><a name="sb">Literatur</a></h3>
<div class="Bibliography">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
</div>
</div>
<!--end bibliography-->
<!--start notes-->
<div class="DivStandard">
<h3 class="HeadingThem"><a name="sn">Anmerkungen</a></h3>
<div class="NotesPosition">
<div class="NotesNumber">
<a href="#r1" name="f1" class="NotesLink"> 1 </a>
</div>
<div class="NotesText">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text. <a href="#r1"><img src="../../src/goup.gif" width="12" height="8" border="0" alt="go back"></a>
</div>
</div>
<div class="NotesPosition">
<div class="NotesNumber">
<a href="#r2" name="f2" class="NotesLink"> 2 </a>
</div>
<div class="NotesText">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text. <a href="#r2"><img src="../../src/goup.gif" width="12" height="8" border="0" alt="go back"></a>
</div>
</div>
</div>
<!--end notes-->
<!--start author-->
<div class="DivStandard">
<h3 class="HeadingThem"><a name="sa">Autor</a></h3>
<div class="AuthorInfo">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
</div>
<address class="AuthorAddress">
Text<br>
</address>
</div>
<!--end author-->
</div>
</body>
</html>
-
Problem ist, dass Mozilla nicht den angegeben Abstand von 40px zwischen Ende der Anmerkungen und der Überschrift "Autor" einhält (=Beispiel 1). Setze ich den Abschnitt "Anmerkungen" in eine Tabelle (statt einem Div), funktioniert's (=Beispiel 2). IE (6.0) und Opera stellen es immer (halbwegs) korrekt dar.
Hat jemand eine Idee, an was das liegen könnte? Ist es ein kleiner Bug oder habe ich unsauberes HTML bzw. CSS fabriziert? Für jeden Tipp bin ich sehr dankbar.
Ohne das konkrete Problem jetzt erfasst zu haben, sieht mir das sehr danach aus, das du es dir unnötig schwer machst.
Was du da hast eine Beschreibungliste. Dafür gibt es HTML Elemente (<dl><dt><dd>) damit kannst du solche Listen produzieren und direkt formatieren.
wenn du diese Formutierungen nur bedingt haben willst, packst du diese in einen Bereich und formatierst dies nur dort:
#bereich { ...}
#bereich dl { ...}
#bereich dd { ...}
#bereich dt { ...}<div id="bereich">
<dl>
<dt>Titel</dt>
<dd>TEXT </dd><dt>Titel</dt>
<dd>TEXT </dd><dt>Titel</dt>
<dd>TEXT </dd></dl>
ist auf jeden Fall besser und einfacher, als mit dutzenden Klassen zu arbeiten.
Struppi.
-
Hallo Struppi!
Was du da hast eine Beschreibungliste. Dafür gibt es HTML Elemente (<dl><dt><dd>) damit kannst du solche Listen produzieren und direkt formatieren.
Vielen Dank für den Tipp mit den Definitionslisten. Daran hatte ich nicht gedacht. Der unschöne Effekt lässt sich damit bei entsprechender Formatierung vermeiden.
ist auf jeden Fall besser und einfacher, als mit dutzenden Klassen zu arbeiten.
Naja, bei einem Projekt mit tausend Einzelseiten sind zentrale Formate in einer separaten CSS-Datei schon recht praktisch...
Viele Grüße
Bertold-
Naja, bei einem Projekt mit tausend Einzelseiten sind zentrale Formate in einer separaten CSS-Datei schon recht praktisch...
HTML Tags sind zentrale Formate und wenn diese auf unterschiedlichen Seiten ein anderes Desgin haben sollen, baust du diese so ein:
besondere.css:
#besondere dl { ...}
#besondere dt { ...}
#besondere dd { ...}besondere.html
<link .. href="besondere.css" >
....
<body id="besondere">
<dt>
...</dt>
</body>
Struppi.
-
-
-
Hallo,
Hat jemand eine Idee, an was das liegen könnte? Ist es ein kleiner Bug oder habe ich unsauberes HTML bzw. CSS fabriziert? Für jeden Tipp bin ich sehr dankbar.
Dein Quellcode ist unnoetig unuebersichtlich.
Du unterliegst offenbar dem Aberglauben, CSS koenne man nur
mit verschachtelten DIVs und moeglichst vielen Klassen anwenden.Pack die Sachen in "anstaendige" Elemente, z.B.
<P> oder eben <DL>/<DT>/<DD>.
Nimm direkt die HTML-Elemente (also z.B. auch h3) als Selektor,
und gebrauche DIVs nur, wenn es nicht anders geht.Voellig unverstaendlich ist mir, warum Du die Schriftart
fuer jedes einzelne Element und jede Klasse definierst.Warum nicht einfach so?
body { font-family:Arial,Helvetica,sans-serif; }
Ausnahmen kannst Du ja immer noch definieren.-
Hallo nochmal,
Mein Posting wurde nicht vollstaendig uebermittelt.
Folgendes wollte ich noch sagen:Zu Deinem "Problemchen":
Die einzige Stelle, wo Du etwas von 40px im CSS hast,
ist offenbar das margin-top in der Klasse fuer <H3>.
Margin-Werte werden aber miteinander "verrechnet",
also muesstest Du in Deinem Fall wahrscheinlich noch
margin-bottom fuer das vorhergehende Element definieren.Gruesse,
Thomas
-
hi,
Die einzige Stelle, wo Du etwas von 40px im CSS hast,
ist offenbar das margin-top in der Klasse fuer <H3>.
Margin-Werte werden aber miteinander "verrechnet",
also muesstest Du in Deinem Fall wahrscheinlich noch
margin-bottom fuer das vorhergehende Element definieren.nicht ganz korrekt - AFAIK soll von zwei konkurrierenden margin-angaben (also z.b. margin-bottom eines elementes vs. margin-top eines darunter liegenden) immer das maximum genommen werden.
margin-top:40px vs. gar keine margin-angabe beim darüber liegenden element würden also trotzdem 40px abstand bedeuten.gruss,
wahsaga-
Hallo,
nicht ganz korrekt - AFAIK soll von zwei konkurrierenden margin-angaben (also z.b. margin-bottom eines elementes vs. margin-top eines darunter liegenden) immer das maximum genommen werden.
Ich schrieb vereinfachend, sie wuerden miteinander "verrechnet".
Deine Aussage stimmt, wenn es zwei Angaben hat und beide
Werte positiv sind.
Wenn einer positiv und einer negativ ist, kommt Mathematik
zum Einsatz:
Oberes Element margin-bottom: 15px;
Unteres Element margin-top: -5px;
Resultierender Abstand: 10pxWie es genau geht, steht in der Spec. und bei SelfHTML - Dir
brauche ich das ja nicht zu sagen:-)margin-top:40px vs. gar keine margin-angabe beim darüber liegenden element würden also trotzdem 40px abstand bedeuten.
"Gar keine Angabe" kann eben auch heissen: "Der Margin, den
der Browser bei diesem Element normalerweise macht".
Und dieser Wert ist bei vielen Browsern bei vielen Block-Elementen
(H1, TABLE, P, UL...) deutlich groesser als Null.Wobei IIRC das "Non-Element" DIV alle Default-Werte auf Null hat,
also sowas wie
div { margin:0; border:0 none; padding:0 }
womit dies als Erklaerung fuer das "Problemchen" des OP
nicht reichen wuerde, da dieser keine sinnvollen (Block-)Elemente
brauchte, sondern eine DIV-Soup...Gruesse,
Thomas
-
hi,
Deine Aussage stimmt, wenn es zwei Angaben hat und beide
Werte positiv sind.
Wenn einer positiv und einer negativ ist, kommt Mathematik
zum Einsatz: [...]jeep, schon klar, diesen fall hatte ich jetzt wiederum nicht bedacht.
gruss,
wahsaga
-
-
-
-
Hallo Thomas!
Vielen Dank für die Tipps!
Voellig unverstaendlich ist mir, warum Du die Schriftart
fuer jedes einzelne Element und jede Klasse definierst.Das ist Betriebsblindheit und stammt noch aus einer Zeit, als ich mit unterschiedlichen Schriftarten hantierte.
Viele Grüße
Bertold
-