ajax333221 ajax333221 - 4 months ago 18
CSS Question

background-color of dashed borders

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. 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