Let's take a look at my simplified CSS code:
body {
background: url('bg.gif') left top;
}
#content {
background: #ddd;
}
.box {
overflow: hidden;
margin-top: 10px;
background: #1e1e1e url('left-bottom-corner.gif') left bottom no-repeat;
}
Now, here is the corresponding markup:
<div id="content">
<div class="box">
<p>lorem ipsum</p>
</div>
</div>
However, a problem arises. In the area where the .box div has a 10px top margin, the background of the #content div is not visible. Instead, the background of the body is shown.
Padding cannot be used in this case because the .box divs need to have round borders and their own background, necessitating the use of margin.
So, how can this incorrect behavior be fixed?