nicht angemeldet
Firefox setzt margin-top obwohl explizit auf null
Hallo forum,
ich hab ein kleines Problem, ich will in den 4 ecken einer div-box jeweisl ein +-zeichen plazieren. im ie funktioniert das auch, aber im ff bekomme ich immer ein margin-top, obwohl der explizit auf null gesetzt ist.
ich hab das mal in einem kleinen beispiel versucht zu verdeutllichen.
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>cross-test</title>
<style type="text/css">
<!--
html, body {
background-color: #000000;
font-family: arial;
font-size: 11pt;
}
div#cont {
width: 300px;
height: 400px;
position: absolute;
top: 100px;
left: 85px;
background-color: #FF0000;
overflow: hidden;
}
.cross {
font-family: Arial, sans-serif;
color: #000000;
font-size: 30px;
}
-->
</style>
</head>
<body>
<div id="cont">
<div style="margin: 0; width: 100%; line-height: 30px;">
<p class="cross" style="float: left; width: 15px;">+</p><p class="cross" style="float: right; width: 15px;">+</p>
</div>
<div style="margin: 345px 0 0 0; width: 100%; line-height: 30px;">
<p class="cross" style="float: left; width: 15px;">+</p><p class="cross" style="float: right; width: 15px;">+</p>
</div>
</div>
</body>
</html>
außerdem liefern die beiden browser auch unterschiedliche abstände an den ecken.
bin für jeden tipp dankbar!!!
danke und greetz
xdream1328
--
~~~~~~~~~~~~~~~~~~~~~~~~~
amplid ::: next level riding
http://www.amplid.com
~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~
amplid ::: next level riding
http://www.amplid.com
~~~~~~~~~~~~~~~~~~~~~~~~~
-
Hi,
Vermutlich weil der Firefox, sowie auch andere Browser, für Absätze margins voreingestellt hat. Wenn Du dies nicht wünscht, dann müßtest Du das schon noch angeben. Aber sinnvoller wäre in diesem Fall statt eines p wohl ein span, da es sich bei "+" kaum um einen Textabsatz handeln dürfte und ich auch kein hierfür passendes Element wüßte. Für dieses bedeutungslose Element haben die Browser übrigens keine Voreinstellungen, so daß Du hier nur das angeben mußt, was Du an Formatierung haben willst.
freundliche Grüße
Ingo-
Hallo ingo
Hi,
Aber sinnvoller wäre in diesem Fall statt eines p wohl ein span, da es sich bei "+" kaum um einen Textabsatz handeln dürfte und ich auch kein hierfür passendes Element wüßte.
freundliche Grüße
Ingodanke für den tip, ich hab das jetzt mit span gelöst und über margin an den rechten rand gebracht, jetzt siehts in beiden browsern fasst identisch aus. die Dokumenttyp-Deklarationen hab ich auch noch geändert. vielen dank dafür
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>cross-test</title>
<style type="text/css">
<!--
html, body {
background-color: #000000;
font-family: arial;
font-size: 11pt;
}div#cont {
width: 300px;
height: 400px;
position: absolute;
top: 100px;
left: 85px;
background-color: #FF0000;
overflow: hidden;
}.cross {
font-family: Arial, sans-serif;
color: #000000;
font-size: 30px;
}
-->
</style></head>
<body>
<div id="cont">
<div style="margin: 0; width: 100%; line-height: 30px;">
<span class="cross" style="text-align: left;">+</span><span class="cross" style="margin-left: 265px; text-align: right">+</span>
</div>
<div style="margin: 340px 0 0 0; width: 100%; line-height: 30px;">
<span class="cross" style="text-align: left;">+</span><span class="cross" style="margin-left: 265px; text-align: right">+</span>
</div>
</div>
</body>
</html>danke und greetz
xdream1328
--
~~~~~~~~~~~~~~~~~~~~~~~~~
amplid ::: next level riding
http://www.amplid.com
~~~~~~~~~~~~~~~~~~~~~~~~~-
Hi,
<span class="cross" style="text-align: left;">+</span><span class="cross" style="margin-left: 265px; text-align: right">+</span>
Dir sollte klar sein, daß span ein inline-Element ist, dessen Breite sich nach dem Imhalt richtet. text-align hat demzufolge keine sichtbare Auswirkung. Das einzige, was sich hier auswirkt, ist das seitliche margin - und das solltest Du auch besser im CSS-Block notieren.
Der Abstand von 265px dürfte übrigens auch nicht immer passen, da er eine bestimmte Breite des Zeichens "+" voraussetzt. Da Du das Elternelement ohnehin schon positioniert und ihm eine feste Breite gegeben hast, bietet sich für das rechte "+" ebenfalls absolute Positionierung an.freundliche Grüße
Ingo
-
-
-
Hallo!
im ff bekomme ich immer ein margin-top, obwohl der explizit auf null gesetzt ist.
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
Bei CSS immer besser strict benutzen, weil die meisten Browsertypen sich dann verlässlicher an die Vorgaben halten.
.cross {
font-family: Arial, sans-serif;
color: #000000;
font-size: 30px;
}<p class="cross" style="float: left; width: 15px;">+</p>
Wo hast du denn da den Rand, der jedem Absatz zu eigen ist, auf 0 gesetzt? Beim div hast du das gemacht, aber da war das wiederum nicht unbedingt nötig, weil divs normalerweise von Haus aus keine Ränder haben.
Grüße, Moses
-
Hi,
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
Bei CSS immer besser strict benutzen, weil die meisten Browsertypen sich dann verlässlicher an die Vorgaben halten.
Nein. 1. ist das ohnehin kein gültiger Doctype, da die Schreibweise nicht korrekt ist und 2. werden auch HTML 4.01 Transitional Dokumente standardkonform behandelt, wenn man die DTD noch angibt.
freundliche Grüße
Ingo-
Hallo!
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
Bei CSS immer besser strict benutzen, weil die meisten Browsertypen sich dann verlässlicher an die Vorgaben halten.
Nein. 1. ist das ohnehin kein gültiger DoctypeWas ist ungültig? Dass er klein geschrieben hat, hat doch nichts damit zu tun, dass der Typ transitional anders behandelt wird als strict.
und 2. werden auch HTML 4.01 Transitional Dokumente standardkonform behandelt, wenn man die DTD noch angibt.
Gut, in http://hsivonen.iki.fi/doctype/ sieht das etwas anders aus. Ich ziehe "standardkonform" mit strict "fast standardkonform" mit transitional vor. Auch wenn der Unterschied marginal sein mag, macht das meine Aussage oben nicht gänzlich falsch.
Gruß, Moses
-
Hi,
Was ist ungültig? Dass er klein geschrieben hat, hat doch nichts damit zu tun, dass der Typ transitional anders behandelt wird als strict.
Das stimmt zwar vermutlich, aber falsch ist Kleinschreibung hier dennoch.
Gut, in http://hsivonen.iki.fi/doctype/ sieht das etwas anders aus. Ich ziehe "standardkonform" mit strict "fast standardkonform" mit transitional vor.
Nicht ganz. Auch hiernach machen die meisten Browser keinen Unterschied zwischen HTML 4.01 Strict und 4.01 Transitional mit DTD. "Kong" kenne ich nicht (gibt's den überhaupt noch?) und einen Unterschied in aktuellen Mozillas oder Opera habe ich hier auch noch nicht bemerkt.
freundliche Grüße
Ingo-
Hallo Ingo,
Gut, in http://hsivonen.iki.fi/doctype/ sieht das etwas anders aus. Ich ziehe "standardkonform" mit strict "fast standardkonform" mit transitional vor.
Nicht ganz. Auch hiernach machen die meisten Browser keinen Unterschied zwischen HTML 4.01 Strict und 4.01 Transitional mit DTD.Die Tabelle ist leicht veraltet und nicht ganz vollstädig (Safari fehlt). Abgesehen vom IE kennt jede aktuelle Version der anderen gängigen Browser (Mozilla, Opera, Safari, Konqueror) die Unterscheidung zwischen "Almost Standards Mode" (z.B. HTML 4.01 Transitional mit DTD) und "Full Standards Mode" (z.B. HTML 4.01 Strict).
"Kong" kenne ich nicht
Da steht "Konq" und das ist die Abkürzung für "Konqueror" ... ;-)
Viele Grüße
Carsten
-
-
-
-