Leerzeile vor einem div mit p-Tag
1 
Tim Tepaße
0 0 0 
MudGuard
0 MudGuard
Leerzeile vor einem div mit p-Tag
Hallo,
Ich habe hier im Firefox ein seltsames Darstellungsproblem. Und zwar wird über einem Div mit einem p-Tag eine Leerzeile im Firefox dargestellt. Im IE jedoch nicht. Lässt man den p-Tag weg ist die Leerzeile vor dem Div auch weg.
Hier mal ein Beispiel zur Veranschaulichung:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
body {
margin: 0px;
}
#test {
background-color: #CCCCCC;
}
</style>
</head>
<body>
<div id="test"><p>Text</p></div>
</body>
</html>
Woran liegt das? Und was kann man dagegen machen? Wenn ich ein br vor den p-Tag schreibe dann ist die weiße leerzeile weg, allerdings fäng der Text dann logischerweise nicht mehr oben an.
Mit freundlichen Grüßen
Jakob Martens
-
Hallo,
Ich habe hier im Firefox ein seltsames Darstellungsproblem. Und zwar wird über einem Div mit einem p-Tag eine Leerzeile im Firefox dargestellt. Im IE jedoch nicht. Lässt man den p-Tag weg ist die Leerzeile vor dem Div auch weg.
Mach mal zwei Experimente:
#text p {
border-top:red;
}Jetzt vergleiche den Abstand zwischen dem Innenraum des Divs und dem oberen Rand des Absatzes. Dann verringerst Du explizit den oberen Außenabstand des Absatzes:
#text p {
margin-top:none;
}Warum ist das so? Weil Firefox ein Browserstylesheet enthält, in dem es eine Regel gibt, in dem Absätze oben und unten einen Abstand von 1em kriegen. Deswegen heissen die Dinger ja auch Absätze.
Tim
-
Hallo,
Leider habe ich bei keinem der beiden Experimente eine Auswirkung gesehen.
Ich habe auch #text durch #test ersetzt, da die id des Divs ja test ist.
Ich es wurde kein roter Rand angezeigt und den weißen Rand habe ich auch mit dem 2. Experiment nicht wegbekommen.... -
Hallo nochmal.
Ich glaube ich habe mich vorhin vertippt.
Ich habe es nochmal ausprobiert und jetzt hat es funktioniert.Vielen Dank!!!!
-
Hi,
#text p {
margin-top:none;
}Das kann man auch ganz weglassen. Denn die einzige Deklaration in diesem Ruleset ist fehlerhaft (eine Länge oder die Konstante inherit wären zulässig), muß also ignoriert werden.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
Hi,
Ich habe hier im Firefox ein seltsames Darstellungsproblem. Und zwar wird über einem Div mit einem p-Tag eine Leerzeile im Firefox dargestellt. Im IE jedoch nicht. Lässt man den p-Tag weg ist die Leerzeile vor dem Div auch weg.
Das liegt an den collapsing margins - p hat im Firefox ein margin-top. da zwischen dem margin-top des div und dem margin-top des p nichts liegt, fallen die beiden zusammen, der margin-top des p wird oberhalb des div dargestellt.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.