Question

I currently have a HTML structure like this:

<div id="holder">
    <div id="content">...</div>
    <div id="footer">...</div>
</div>

The CSS is like this:

* {
    margin: 0;
    padding: 0;
}

#content, #footer {
    background: #fff;
}

#footer {
    border-top: 1px dashed #ddd;
}

Note: holder doesn’t have any background-color

---

My concern is that the background of the top border on the footer will be transparent since holder doesn’t have any background.

And applying a white background to the holder is not an option in my case (I won’t explain why not, but trust me, it is not possible)

My Question:

• The background of the dashed border will be the same of my footer
  (white) or the background-color of holder (none)?
• Will it behave cross-browser the same way all the time?

Answer 1

1. The border belongs to your #footer div and will render with its background attribute – clear or otherwise.

2. I’ve tested the following CSS in Chrome, Safari, Firefox (sorry, no immediate IE access):

   * { margin: 0; padding: 0; }
   
   #content, #footer { background: #fff; }
   
   #content { background:#00F; }
   
   #footer {
       border-top: 5px dashed #f00;
   }
   

Please let me know if I missed your question, but I believe this is what you were asking.

The background style of the content, padding, and border areas of a box is specified by the ‘background’ property of the generating element. Margin backgrounds are always transparent.

via http://www.w3.org/TR/CSS2/box.html