nicht angemeldet
Firefox interpretiert margin-top nicht richtig
0 
Gunnar Bittersmann
0 0 0
1
0
Firefox interpretiert margin-top nicht richtig
Hallo,
mein Firefox V 2.0 interpretiert die Positionsangabe eines div Containers total falsch.
Ich möchte den einen Container 160px unterhalb der Oberkante des übergeordneten Containers ausrichten und habe ihm deshalb die angabe "margin-top:160px;" zugewiesen, aber der Firefox knallt es immer an die obere Kante des übergeordneten Containers.
Der IE interpretiert es hingegen richtig - normalerweise mag ich den Firefox und er hat auch noch nie so einen Schlamassel produziert (das ist man ja sonst eher vom IE gewohnt) aber hier verstehe ich es nicht richtig.
Kann mit dabei jemand helfen?? Ich hab zwar schon im Inet geschaut und auch nochmal die Referenz von "margin-top" überprüft, finde den Fehler aber nicht.
Vielen Dank im Voraus & beste Grüße,
Philipp
Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> <title>Internetnight </title> </head>
<!--<script LANGUAGE="JavaScript" FOR="window" EVENT="onload()">
window.moveTo(0, 0)
window.resizeTo(660, 660)
</script> -->
<script type="text/javascript">
<!--
Normal1 = new Image();
Normal1.src = "./autostart/button1b.gif"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "./autostart/button1a.gif"; /* erste Highlight-Grafik */
Normal2 = new Image();
Normal2.src = "./autostart/button2b.gif"; /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "./autostart/button2a.gif"; /* zweite Highlight-Grafik */
function Bildwechsel (Bildnr, Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
}
-->
</script>
<style type="text/css">
<!--
/* Text */
body
{
font-family: arial;
font-size: 12px;
color:#000000;
}
#ueberschrift {
font-family:arial;
font-size:12pt;
font-weight:700;
line-height:16pt;
}
-->
</style>
<body style="background-color:#FFFFFF;">
<!-- Hauptrahmen -->
<div style="margin:0px auto; height:500px; width:660px; background-image: url(./autostart/hg2.jpg); text-align:center;">
<!--Inhaltsrahmen-->
<div style="margin-top:160px; width:500px;">
<span id="ueberschrift">
<p>Herzlich Willkommen zur InternetNight</p>
<p style="text-align:justify; font-weight:500;">Es erwartet Sie eine interaktive Präsentation mit Informationen und Bildern
rund um die InternetNight.</p>
</span>
<!-- Auswahlrahmen -->
<div style="width:300px; height:150px; float:left;">
<a href="./_start_.pdf"
onmouseover="Bildwechsel(0, Highlight1)"
onmouseout="Bildwechsel(0, Normal1)"> <img src="./autostart/button1b.gif" alt="" border="0">
</a>
<a href="./bonusmaterial/install/AdbeRdr07DE.exe"
onmouseover="Bildwechsel(1, Highlight2)"
onmouseout="Bildwechsel(1, Normal2)"> <img src="./autostart/button2b.gif" alt="" border="0">
</a>
</div>
</div>
</div>
</body>
</html>
-
Hello out there!
mein Firefox V 2.0 interpretiert die Positionsangabe eines div Containers total falsch. […]
Der IE interpretiert es hingegen richtigDiese Aussage ist in den allermeisten Fällen falsch.
Siehe CSS-Spec., Kap. 8.3.1 Zusammenfallende Ränder CSS2 §8.1.3]
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Hello out there!
mein Firefox V 2.0 interpretiert die Positionsangabe eines div Containers total falsch. […]
Der IE interpretiert es hingegen richtigDiese Aussage ist in den allermeisten Fällen falsch.
Verstehe schon, ich bin ja normalerweise auch ein hemmungsloser Befürworter des FF und IE Hasser, aber in diesem Falle leider nicht.
Ich habe meinem übergeordneten <div> jetzt einen eigenen Rahmen verpaßt und siehe da, es geht.
Aber warum nicht gleich so?? Wieso muß ich erst einen sinnlosen Rahmen angeben, damit FF die margin-top Angabe richtig umsetzt?? In diesem Fall geht die Runde leider an den IE...
Vielen Dank,
scrub
-
hi,
Verstehe schon, ich bin ja normalerweise auch ein hemmungsloser Befürworter des FF und IE Hasser, aber in diesem Falle leider nicht.
Irrationale Gefühlsäusserungen sind beim lösen technischer Probleme selten hilfreich :-)
Ich habe meinem übergeordneten <div> jetzt einen eigenen Rahmen verpaßt und siehe da, es geht.
Aber warum nicht gleich so?? Wieso muß ich erst einen sinnlosen Rahmen angeben, damit FF die margin-top Angabe richtig umsetzt??
Weil es _genau so_ in der CSS-Spezifikation definiert ist.
In diesem Fall geht die Runde leider an den IE...
Nein, geht sie nicht.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo,
Irrationale Gefühlsäusserungen sind beim lösen technischer Probleme selten hilfreich :-)
ich werde mich in Zukunft zügeln... ;o)
Weil es _genau so_ in der CSS-Spezifikation definiert ist.
Ok, werd ich mir merken,dann passiert mir das nicht nochmal...
Aber ich frage mich immernoch, worin der Sinn diese Teils der Spezifikation liegt. Warum muß man einen Rahmen anlegen (auch wenn mann keinen haben will) nur um einen inneren Container dann positionieren zu können?
Ich bin jetzt (offensichtlich) nicht der HTML Crack, würde es aber trotzdem gern verstehen.
MfG,
scrub
-
Tach.
Aber ich frage mich immernoch, worin der Sinn diese Teils der Spezifikation liegt. Warum muß man einen Rahmen anlegen (auch wenn mann keinen haben will) nur um einen inneren Container dann positionieren zu können?
Zum Thema "margin collapsing" schrieb Eric Meyer einst einen sehr informativen Artikel: Uncollapsing Margins.
--
Once is a mistake, twice is jazz.-
Zum Thema "margin collapsing" schrieb Eric Meyer einst einen sehr informativen Artikel: Uncollapsing Margins.
Ok, jetzt ist alles klar.
Danke
-
-
Aber ich frage mich immernoch, worin der Sinn diese Teils der Spezifikation liegt. Warum muß man einen Rahmen anlegen (auch wenn mann keinen haben will) nur um einen inneren Container dann positionieren zu können?
Außenabstände werden zusammengezogen (ich hatte bereits auf die entsprechende Stelle verwiesen), im Ergebnis wird der größte (!) Abstand der betroffenen Elemente genutzt. Das macht den Prozess etwas berechenbarer, weil sich die Abstände nicht addieren; es ist immer der größte gewünschte Abstand vorhanden, aber niemals ein Monsterabstand und meist auch keine unregelmäßigen Abstände (zum Beispiel hätte <h1> immer den Abstand x, nicht hier einmal x bei der Folge <h1><p>, dort einmal y bei der Folge <h1><ul>, dann z wegen <h1><div>, etc).
Bei Dir soll allerdings überhaupt kein Abstand existieren ("immer an die obere Kante des übergeordneten Containers"). Nach dieser Regel müssten aber _immer_ mindestens 160 Pixel vorhanden sein (was bei mir der Fall ist), insofern muss da noch irgendwas anderes dazwischen hauen. Hast Du den gesamten HTML- und CSS-Code angegeben?
Der Hansel
-
Bei Dir soll allerdings überhaupt kein Abstand existieren ("immer an die obere Kante des übergeordneten Containers"). Nach dieser Regel müssten aber _immer_ mindestens 160 Pixel vorhanden sein (was bei mir der Fall ist), insofern muss da noch irgendwas anderes dazwischen hauen. Hast Du den gesamten HTML- und CSS-Code angegeben?
Der Hansel
Ich hab den kompletten Code eingefügt...
Ich verstehe es auch nicht wirklich. Ich hab schon mehrere Sachen programmiert, aber sowas is mir noch nie passiert.Ich werde es mir einfach merken. In einer ähnlichen Situation, weiß ich was zu tun ist und werde mir generell angewöhnen sauberer zu programmieren.
Danke,
scrub
-
Hello out there!
und werde mir generell angewöhnen sauberer zu programmieren.
... und auch nicht mehr „programmieren“ zu sagen, wenn es um HTML oder CSS geht – keines davon ist eine Programmiersprache.
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
-
-
-
-
-
Hi,
mein Firefox V 2.0 interpretiert die Positionsangabe eines div Containers total falsch. […]
Der IE interpretiert es hingegen richtig
Diese Aussage ist in den allermeisten Fällen falsch.
Verstehe schon, ich bin ja normalerweise auch ein hemmungsloser Befürworter des FF und IE Hasser, aber in diesem Falle leider nicht.das hat nichts mit Vorlieben oder Hass zu tun - es ist eine schlichte Tatsache, dass bei Unterschieden zwischen IE und einem aktuellen Gecko in beinahe 100% aller Fälle der Fehler beim IE liegt. Ganz, ganz selten mal ist es anders herum.
Ich habe meinem übergeordneten <div> jetzt einen eigenen Rahmen verpaßt und siehe da, es geht.
Aber warum nicht gleich so??Weil sich Firefox nun mal an den Standard hält.
Wieso muß ich erst einen sinnlosen Rahmen angeben, damit FF die margin-top Angabe richtig umsetzt?? In diesem Fall geht die Runde leider an den IE...
Nein, nicht im geringsten. Selbst wenn man mit einer Spezifikation nicht einverstanden ist - sie ist bedingungslos einzuhalten. Alles andere führt *immer* zu Problemen, weil es *nichts* mehr gibt, nach dem man sich richten kann. Du kannst gerne das W3C für diesen Teil der CSS-Spezifikation verurteilen, auf keinen Fall aber Firefox. Und noch viel weniger kannst Du es dem IE zugute halten, dass er etwas zwar in Deinem Sinne, aber faktisch absolut falsch macht.
Übrigens wurde der Standard, dem der IE zuwider läuft, von Microsoft mitentwickelt. Der Name Tantek Çelik könnte Dir ein Begriff sein.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-
mein Firefox V 2.0 interpretiert die Positionsangabe eines div-Containers total falsch.
Ich möchte den einen Container 160px unterhalb der Oberkante des übergeordneten Containers ausrichten und habe ihm deshalb die angabe "margin-top:160px;" zugewiesen, aber der Firefox knallt es immer an die obere Kante des übergeordneten Containers.
Kann ich nicht nachvollziehen. Der erste innere <div>-Block steht mit Deinem zitierten Code (ohne <script>-Anteile) im Firefox 1.5 und 2.0 exakt 160 Pixel unterhalb der Oberkante des äußeren Blocks.
Beobachtet habe ich hingegen, dass, gibt man allen drei <div>-Blöcken einen Rahmen, der Inhalt des besagten ersten inneren eine Zeile runterrutscht. Das schiebe ich jetzt aber einfach mal auf Deinen fehlerhaften HTML-Code:
<div style="margin-top:160px; width:500px;">
<span id="ueberschrift">
<p>Herzlich Willkommen zur InternetNight</p><p> hat in <span> nichts zu suchen (und <span id="ueberschrift"> ist obendrein ganz schlechtes HTML, für sowas gibt es <h1>).
Der Hansel
-
Beobachtet habe ich hingegen, dass, gibt man allen drei <div>-Blöcken einen Rahmen, der Inhalt des besagten ersten inneren eine Zeile runterrutscht. Das schiebe ich jetzt aber einfach mal auf Deinen fehlerhaften HTML-Code:
<div style="margin-top:160px; width:500px;">
<span id="ueberschrift">
<p>Herzlich Willkommen zur InternetNight</p>Korrigiere mich, gemäß CSS 2, 8.3.1 werden der Außenabstand des <div>s (Dein margin-top:160px) und jener des <p>-Elements zusammengefasst, wenn der Rahmen nicht vorhanden ist. Dementsprechend muss der Text um den Außenabstand des <p>-Elements runterrutschen, sobald <div> einen Rahmen bekommt.
Erklärt aber alles nicht, warum der <div>-Block bei Dir ohne Rahmen überhaupt keinen Abstand haben soll. Und der HTML-Code ist natürlich immer noch falsch.
-
Beobachtet habe ich hingegen, dass, gibt man allen drei <div>-Blöcken einen Rahmen, der Inhalt des besagten ersten inneren eine Zeile runterrutscht. Das schiebe ich jetzt aber einfach mal auf Deinen fehlerhaften HTML-Code:
<div style="margin-top:160px; width:500px;">
<span id="ueberschrift">
<p>Herzlich Willkommen zur InternetNight</p><p> hat in <span> nichts zu suchen (und <span id="ueberschrift"> ist obendrein ganz schlechtes HTML, für sowas gibt es <h1>).
Der Hansel
@hansel
Vielen Dank für deine Antwort.Wieso hat ein <p> in einem <span> nix zu suchen??
Und wieso ist es schlechtes HTML wenn ich mit id="ueberschrift" arbeiten möchte, ich persönlich nutze nur ungern <h1> tags.Beste Grüße,
scrub
-
Wieso hat ein <p> in einem <span> nix zu suchen??
Weil ein <p> ein Blockelement ist und ein <span> ein inline-Element und in inline-Elementen keine Block-Elemente vorkommen dürfen.
Und wieso ist es schlechtes HTML wenn ich mit id="ueberschrift" arbeiten möchte, ich persönlich nutze nur ungern <h1> tags.
Weil ein <h1> eben eine semantisch korrekte Überschrift ist. <div id="ueberschrift"> ist Schwachsinn, woher soll ein nicht-CSS-fähiger Browser / screenreader / suchmaschinenroboter / etc. dann wissen, dass es sich um eine Überschrift handelt?
Was hast du gegen <hx>?-
Wieso hat ein <p> in einem <span> nix zu suchen??
Weil ein <p> ein Blockelement ist und ein <span> ein inline-Element und in inline-Elementen keine Block-Elemente vorkommen dürfen.
Was ist ein inline Element??
Und wieso ist es schlechtes HTML wenn ich mit id="ueberschrift" arbeiten möchte, ich persönlich nutze nur ungern <h1> tags.
Weil ein <h1> eben eine semantisch korrekte Überschrift ist. <div id="ueberschrift"> ist Schwachsinn, woher soll ein nicht-CSS-fähiger Browser / screenreader / suchmaschinenroboter / etc. dann wissen, dass es sich um eine Überschrift handelt?
Was hast du gegen <hx>?Bei <hx> ist die Größe vordefiniert, ich lege es lieber selbst fest.
Meistens lege ich alles über style="" fest, seltener per id=""; ich gebe zu, daß das Unsinn sein könnte.
Was sind denn die Vorteile von <hx>??Danke & Gruß,
scrub
-
Was ist ein inline Element??
http://www.w3.org/TR/html401/struct/global.html#h-7.5.3
Blocklevel-Elemente beginnen generell in einer neuen Zeile, Inline-Elemente nicht. Schreibst du ein Blocklevel-Element in ein Inline-Element, wird deshalb eine neue Zeile begonnen. Deshalb sind Blocklevel- innerhalb von Inline-Elementen Unsinn und nicht erlaubt.
Bei <hx> ist die Größe vordefiniert, ich lege es lieber selbst fest.
Bei hx ist nichts vorgegeben, was du nicht mittels CSS ändern könntest, so wie du es auch bei dem DIV tust.
Was sind denn die Vorteile von <hx>??
Logik. Eine Überschrift ist eine Überschrift und sollte auch so genannt werden.
Siechfred
--
Ein Selbständiger ist jemand, der bereit ist, 16 Stunden am Tag zu arbeiten, nur um nicht 8 Stunden für einen Anderen arbeiten zu müssen.-
Vielen Dank für deine Antworten,
ich werde das das nächste mal mehr beachten und statt neuen id, die <hx>tags meinen Wünschen anpassen.
Gruß,
scrub
-
-
Hello out there!
Weil ein <h1> eben eine semantisch korrekte Überschrift ist. <div id="ueberschrift"> ist Schwachsinn, woher soll ein nicht-CSS-fähiger Browser / screenreader / suchmaschinenroboter / etc. dann wissen, dass es sich um eine Überschrift handelt?
Besonders wichtig für Blinde! Die sehen ja nicht, dass eine Textpassage besonders groß auf dem Bildschirm erscheint. Ein Screenreader bietet aber die Funktionalität, alle Überschriften nacheinander vorzulesen. Natürlich nur die, die auch als Überschriften 'h1'...'h6' ausgezeichnet sind.
Was hast du gegen <hx>?
Bei <hx> ist die Größe vordefiniert, ich lege es lieber selbst fest.CSS lässt sich auf alle Elemente anwenden. Und ein Browser hat für alle Elemente Voreinstellungen – die du mit deinen Werten überschreiben kannst.
(Und ein Nutzer kann deine Werte überschreiben. – http://de.selfhtml.org/css/formate/kaskade.htm#ursprung@title=Kaskade)
Meistens lege ich alles über style="" fest, seltener per id=""; ich gebe zu, daß das Unsinn sein könnte.
Das _ist_ Unsinn. https://forum.selfhtml.org/?t=149244&m=969408
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
-
-
-
<div style="margin-top:160px; width:500px;">
<span id="ueberschrift">
<p>Herzlich Willkommen zur InternetNight</p>Und wieso ist es schlechtes HTML, wenn ich mit id="ueberschrift" arbeiten möchte, ich persönlich nutze nur ungern <h1>-Tags.
Es geht nicht um id="ueberschrift", sondern um <span>.
Der Sinn von HTML ist es, dem Dokument eine logische Struktur zu geben, also eine, die seinen Inhalt beschreibt und ihm folgt. Mit den aussagelosen <div> und <span> geht das nicht, deshalb sind diese beiden nur Notnagel für Fälle, in denen andere Elemente (wie <h1>) nicht passen.
Aus demselben Grund sind Elemente wie <font>, <b> oder <i> nicht gern gesehen; sie machen eine optische Aussage, aber keine inhaltliche.Je weniger <div> und <span> Du benutzt, desto leichter lassen sich Deine Seiten selbst auf den absonderlichsten oder ältesten Browsern noch lesen.
Davon unabhängig verhalten sich <h1> & Co. nicht wesentlich anders als <div> und <p>, bei allen handelt es sich um Blockelemente. Lediglich Abstände sowie Schriftgröße und -form müssten per CSS angepasst werden - aber das hattest Du mit dem Setzen von id="ueberschrift" ja sicherlich eh vor, insofern entsteht da kein zusätzlicher Aufwand.
Es gibt also keinen Grund, <hn> nicht zu benutzen. Eher im Gegenteil: Durch display:inline könntest Du <hn> sogar dazu bewegen, sich in der Anzeige wie ein Inline-Element und damit wie <span> zu verhalten, kannst aber trotzdem <p>-Elemente einbetten. Obendrein sparst Du haufenweise Code:
<div>
<span id="ueberschrift">
<p>Herzlich Willkommen zur InternetNight</p>gegenüber
<h1 id="ueberschrift">Herzlich Willkommen zur Internetnight</h1>
Du siehst: Nur Vorteile :-)
Der Hansel
-
-