mgisonno
10-27-2006, 11:53 AM
So I am creating a drop shawdow rounded corner effect with css. I have completed the task and everything works great cross browser.
The problem is, now if I put some text under the box and outside it's container, the text, img, layer, etc overlaps the first drop shawdow box.
Here is the code, you can see the problem in any browser.
<style type="text/css">
.roundbox-wrap {position: relative; margin-left: 2px;}
/* Regular box style */
.roundbox {position: absolute; margin-left: -2px; width: 100%;}
.roundbox2 {margin-left: -2px; width: 100%;}
.rd2, .rd3, .rd4, .roundboxcont {background: #f9f8f6; border-color: #ccc;}
.rd1 {background: #ccc;}
.rd2, .rd3, .rd4, .rd2shad, .rd3shad, .rd4shad {border-style : solid; border-width : 0 1px;}
.roundboxcont, .roundboxshadcont {display: block; border-style: solid; border-width: 0 1px;}
.rd1, .rd2, .rd3, .rd1shad, .rd2shad, .rd3shad {height: 1px;}
.rd1, .rd1shad {margin: 0 5px;}
.rd2, .rd2shad {margin: 0 3px; border-width : 0 2px;}
.rd3, .rd3shad {margin: 0 2px;}
.rd4, .rd4shad {height: 2px; margin: 0 1px;}
.rd1, .rd2, .rd3, .rd4, .rd1shad, .rd2shad, .rd3shad, .rd4shad {display: block; overflow: hidden;}
.rd5, .rd5shad {font-size: 1px; display: block; overflow: hidden; height: 1px;}
.roundboxblock, .roundboxshadblock {display: block; font-size: 1px;}
/* Shading style */
.roundboxshad {position: absolute; top: 2px; width: 100%;}
.rd2shad, .rd3shad, .rd4shad, .roundboxshadcont {background: #ccc; border-color: #ccc;}
.rd1shad {background: #ccc;}
</style>
This is your middle boxes:<br>
<div class="roundbox-wrap" style="width: 240px;"> <!-- Set this width to designate how wide they are -->
<!-- Background Shadow Start -->
<div class="roundboxshad">
<b class="roundboxshadblock"><b class="rd1shad"></b><b class="rd2shad"></b><b class="rd3shad"></b><b class="rd4shad"></b></b>
<div class="roundboxshadcont" style=" height: 200px;"> <!-- height needs to be the same as "roundboxcont" -->
<b class="rd5shad"></b>
<!-- No content here -->
<b class="rd5shad"></b>
</div>
<b class="roundboxshadblock"><b class="rd4shad"></b><b class="rd3shad"></b><b class="rd2shad"></b><b class="rd1shad"></b></b>
</div>
<!-- Background Shadow Stop -->
<!-- Foreground Start -->
<div class="roundbox">
<b class="roundboxblock"><b class="rd1"></b><b class="rd2"></b><b class="rd3"></b><b class="rd4"></b></b>
<div class="roundboxcont" style="height: 200px;"> <!-- height needs to be the same as "roundboxshadcont" -->
<b class="rd5"></b>
This is where all the pretty content goes. If you want padding, nest another layer in here and set the padding on that.
<b class="rd5"></b>
</div>
<b class="roundboxblock"><b class="rd4"></b><b class="rd3"></b><b class="rd2"></b><b class="rd1"></b></b>
</div>
<!-- Foreground Stop -->
</div>
This is your bottom boxes:<br>
<div class="roundbox-wrap" style="width: 240px;">
<div class="roundbox2">
<b class="roundboxblock"><b class="rd1"></b><b class="rd2"></b><b class="rd3"></b><b class="rd4"></b></b>
<div class="roundboxcont" style="height: 200px;"> <!-- height needs to be the same as "roundboxshadcont" -->
<b class="rd5"></b>
This is the second box that overlaps the first.
<b class="rd5"></b>
</div>
<b class="roundboxblock"><b class="rd4"></b><b class="rd3"></b><b class="rd2"></b><b class="rd1"></b></b>
</div>
</div>
The problem is, now if I put some text under the box and outside it's container, the text, img, layer, etc overlaps the first drop shawdow box.
Here is the code, you can see the problem in any browser.
<style type="text/css">
.roundbox-wrap {position: relative; margin-left: 2px;}
/* Regular box style */
.roundbox {position: absolute; margin-left: -2px; width: 100%;}
.roundbox2 {margin-left: -2px; width: 100%;}
.rd2, .rd3, .rd4, .roundboxcont {background: #f9f8f6; border-color: #ccc;}
.rd1 {background: #ccc;}
.rd2, .rd3, .rd4, .rd2shad, .rd3shad, .rd4shad {border-style : solid; border-width : 0 1px;}
.roundboxcont, .roundboxshadcont {display: block; border-style: solid; border-width: 0 1px;}
.rd1, .rd2, .rd3, .rd1shad, .rd2shad, .rd3shad {height: 1px;}
.rd1, .rd1shad {margin: 0 5px;}
.rd2, .rd2shad {margin: 0 3px; border-width : 0 2px;}
.rd3, .rd3shad {margin: 0 2px;}
.rd4, .rd4shad {height: 2px; margin: 0 1px;}
.rd1, .rd2, .rd3, .rd4, .rd1shad, .rd2shad, .rd3shad, .rd4shad {display: block; overflow: hidden;}
.rd5, .rd5shad {font-size: 1px; display: block; overflow: hidden; height: 1px;}
.roundboxblock, .roundboxshadblock {display: block; font-size: 1px;}
/* Shading style */
.roundboxshad {position: absolute; top: 2px; width: 100%;}
.rd2shad, .rd3shad, .rd4shad, .roundboxshadcont {background: #ccc; border-color: #ccc;}
.rd1shad {background: #ccc;}
</style>
This is your middle boxes:<br>
<div class="roundbox-wrap" style="width: 240px;"> <!-- Set this width to designate how wide they are -->
<!-- Background Shadow Start -->
<div class="roundboxshad">
<b class="roundboxshadblock"><b class="rd1shad"></b><b class="rd2shad"></b><b class="rd3shad"></b><b class="rd4shad"></b></b>
<div class="roundboxshadcont" style=" height: 200px;"> <!-- height needs to be the same as "roundboxcont" -->
<b class="rd5shad"></b>
<!-- No content here -->
<b class="rd5shad"></b>
</div>
<b class="roundboxshadblock"><b class="rd4shad"></b><b class="rd3shad"></b><b class="rd2shad"></b><b class="rd1shad"></b></b>
</div>
<!-- Background Shadow Stop -->
<!-- Foreground Start -->
<div class="roundbox">
<b class="roundboxblock"><b class="rd1"></b><b class="rd2"></b><b class="rd3"></b><b class="rd4"></b></b>
<div class="roundboxcont" style="height: 200px;"> <!-- height needs to be the same as "roundboxshadcont" -->
<b class="rd5"></b>
This is where all the pretty content goes. If you want padding, nest another layer in here and set the padding on that.
<b class="rd5"></b>
</div>
<b class="roundboxblock"><b class="rd4"></b><b class="rd3"></b><b class="rd2"></b><b class="rd1"></b></b>
</div>
<!-- Foreground Stop -->
</div>
This is your bottom boxes:<br>
<div class="roundbox-wrap" style="width: 240px;">
<div class="roundbox2">
<b class="roundboxblock"><b class="rd1"></b><b class="rd2"></b><b class="rd3"></b><b class="rd4"></b></b>
<div class="roundboxcont" style="height: 200px;"> <!-- height needs to be the same as "roundboxshadcont" -->
<b class="rd5"></b>
This is the second box that overlaps the first.
<b class="rd5"></b>
</div>
<b class="roundboxblock"><b class="rd4"></b><b class="rd3"></b><b class="rd2"></b><b class="rd1"></b></b>
</div>
</div>