padding-Problem mit IE8

Question

Hallo Leute.

Folgende (vereinfachte) Situation: Ich habe ein einfaches div

<div class="test">
Lorem ipsum dolor sit...
</div>

und folgendes CSS dazu

div.test {
width: 200px;
height: 200px;
overflow: auto;
padding: 40px;
background-color: green;
}

Wenn ich nun soviel Text in das DIV packe, dass ein Scroll-Balken auftaucht (overflow: auto), dann wird mir im Internet Explorer 8 das Padding am unteren Rand des DIVs nicht mehr angezeigt. Im Firefox funktioniert es hingegen. Hier ein Screenshot.

Weiß irgendjemand woran das liegt und wie ich das Problem lösen kann?

Danke und Gruß,
XEN0

Answer 1

nutze statt padding des DIV das margin oder padding eines im DIV gelegenen Elements

Answer 2

Wow, das ging ja schnell. Und funktioniert!
Hier für alle der "workaround":

<div class="test">
<div class="wrapper">
Lorem ipsum dolor sit ...
</div>
</div>

.test {
width: 200px;
height: 200px;
overflow: auto;
background-color: green;
}
.wrapper {
padding: 40px;
}

Wieso "mein" Weg nicht funktioniert, ist mir trotzdem nicht ganz klar. Ist das einfach nur Bug im IE8...?

Auf jeden Fall vielen Dank an "gast_42" für die Problemlösung!

Gruß,
XEN0

Answer 3

die Klasse "wrapper" ist überflüssig, es genügt

div.test div { ... }

oder ein anderes Element im DIV test, ich vermute ein <p> wäre vom Inhalt her logischer.

Ebenso gehe ich davon aus, dass es eher id="test" heißen müsste, da du nur ein DIV dieser Klasse hast auf der Seite (so dein Posting oben). Klassen mit nur einem Mitglied sind IDs.

Also könnte der optimierte Code so lauten:

<div id="test">
<p>Lorem ipsum dolor sit ... </p>
</div>

#test {
width: 200px;
height: 200px;
overflow: auto;
background-color: green;
}
#test p {
padding: 40px;
}

Wenn es im div test mehrere p gibt und das padding nur für's letzte gelten soll wäre

#test p:last-child {
padding-bottom: 40px;
}

eine einfache Lösung, auch für alle anderen p darin könntest du separate Abstände definieren, siehe Alle Selektoren