The following will allow you to add a border to all the web part zones as long as they have a web part. If the web part zone is empty, the border will not display.
Below is the browser rendered HTML of a web part zone without a web part. As you can see, there is an ampty table cell with a class attribute of class="wp-container.
<!-- Rendered web part zone without a web part --> <table> <tbody> <tr> <td> </td> </tr> </tbody> </table>
Below is the browser rendered HTML of a web part zone with a web part. We want to apply the border to the nested table after the cell with the class="wp-container.
<!-- Rendered web part zone with a web part --> <table> <tbody> <tr> <td> <table> <tbody> <tr> <td> <table> <tbody> <tr> <td> <table> <tbody> <tr> <td> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table>
This can be accomplished one of two ways depending on the browser support requirements. If you have the luxury of NOT supporting Internet Explorer 6 browser users, or you just don’t care about IE6 browser users, the following CSS code snippet will suffice:
/* assign the style to the table element that are children of div.wp-container (not supported by IE6) */ div.wp-container > table { border: 1px solid #ddd; background-color: #fff; }
If you want a more browser optimized solution that includes IE6 support, the following should work for you:
/* assign the style to the table element that are a direct descendent of div.wp-container */ div.wp-container table { border: 1px solid #ddd; background-color: #fff; } /* stop assigning this style to all other descendent of div.wp-container */ div.wp-container table table, div.wp-container table table table, div.wp-container table table table table, div.wp-container table table table table table { border: none; background-color: inherit; }
Leave a Reply