nicht angemeldet
Hi Leute,
ich probier mich grade zum ersten Mal an einem responsiven Design, das klappt soweit auch eigentlich ziemlich gut. Nur verstehe ich gerade nicht das Verhalten eines p-Elements.
Hier mal der relevante HTML-Code:
<body>
<div id="wrapper">
<article id="sitecontent">
<section>
<p>[hier steht eigentlich viel Text]</p>
</section>
</div>
</body>
Und hier alle CSS-Regeln die auf das p-Element Einfluss nehmen (laut Firebug):
p {
background-color: #454A4F;
}
body * {
-moz-box-sizing: border-box;
}
body {
color: #FFFFFF;
}
body {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 48px;
}
Das section-Element (quasi das Eltern-Element) hat eine breite von 100% da display: block und auch die gleiche Hintergrundfarbe, wie das p-Element, allerdings, wenn ich dem p-Element keine Hintergrundfarbe verpasse, dann hat nur eine breite von ca. 50% auf dem Android-Smartphone mit dem ich testen kann, bzw. auch mit dem Emulator des Android SDKs.
Wenn hingegen eine Hintergrundfarbe gesetzt wird, dann bekommt das p-Element auch seine 100% Breite.
Das Verhalten zeigt sich auch bei a-Elementen bei denen die Eigenschaft display auf block gesetzt wurde.
background-color: transparent; hilft auch nicht.
Eine Testseite ist hier erreichbar. (Inhalt ignorieren, Werbung wird von ohost reingeprügelt, für Tests hab ich bis dato noch eine fixe Schriftgröße von 48px für reine Testzwecke)
"Wir freuen uns.." ist besagtes p-Element mit Hintergrundfarbe. "Fachbücher dsfds fsdf sdfsdfsd dsf sfds" ist besagtes a-Element mit display: block;, dass das gleiche Verhalten zeigt, als wenn das p-Element keine Hintergrundfarbe hätte.
Kann mir jemand das Verhalten erklären?
MfG
bubble
If "god" had intended us to drink beer, he would have given us stomachs. - David Daye
Matthias Apsel