Rounded Corner box does not show up

I am trying to add a rounded expandable text box. I am using dreamweaver and the box shows up in the design area, but when I view it in firefox, only the text shows up.

HTML


<div>
<b class="contentboxes">
<b class="contentboxes1"><b></b></b>
<b class="contentboxes2"><b></b></b>
<b class="contentboxes3"></b>
<b class="contentboxes4"></b>
<b class="contentboxes5"></b></b>

<div class="contentboxesfg">
<p> jdfjsjfsdjfs</p>
</div>

<b class="contentboxes">
<b class="contentboxes5"></b>
<b class="contentboxes4"></b>
<b class="contentboxes3"></b>
<b class="contentboxes2"><b></b></b>
<b class="contentboxes1"><b></b></b></b>
</div>


CSS




<style type="text/css">
.contentboxes{display:block}
.contentboxes *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#2A2A2A}
.contentboxes1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #a3a3a3;
border-right:1px solid #a3a3a3;
background:#5f5f5f}
.contentboxes2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #e9e9e9;
border-right:1px solid #e9e9e9;
background:#525252}
.contentboxes3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #525252;
border-right:1px solid #525252;}
.contentboxes4{
border-left:1px solid #a3a3a3;
border-right:1px solid #a3a3a3}
.contentboxes5{
border-left:1px solid #5f5f5f;
border-right:1px solid #5f5f5f}
.contentboxesfg{
background:#2A2A2A}
</style>

Do you have a Live link?

try this...


CSS

.containercolour { position: relative; background: #DDDDFF; margin: 0px 5px; } /* BACKGROUND OF ROUNDED BOX */
.rtopcolour, .rbottomcolour { display: block; background:#FFFFFF; } /* OUTTER EDGE COLOUR */
.rtopcolour *, .rbottomcolour *{ display: block; height: 1px; overflow: hidden; background: #DDDDFF; } /* BACKGROUND OF ROUNDED BOX */

.r1{ margin: 0px 5px; line-height: 1px; }
.r2{ margin: 0px 3px; line-height: 1px; }
.r3{ margin: 0px 2px; line-height: 1px; }
.r4{ margin: 0px 1px; line-height: 1px; }


HTML

<div class="containercolour">
<div class="rtopcolour"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
your text here
<div class="rbottomcolour"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
</div>

It turns out that the issue I was running into was that there wasn't a } after one part of my code. Thanks for the help though.




try this...


CSS

.containercolour { position: relative; background: #DDDDFF; margin: 0px 5px; } /* BACKGROUND OF ROUNDED BOX */
.rtopcolour, .rbottomcolour { display: block; background:#FFFFFF; } /* OUTTER EDGE COLOUR */
.rtopcolour *, .rbottomcolour *{ display: block; height: 1px; overflow: hidden; background: #DDDDFF; } /* BACKGROUND OF ROUNDED BOX */

.r1{ margin: 0px 5px; line-height: 1px; }
.r2{ margin: 0px 3px; line-height: 1px; }
.r3{ margin: 0px 2px; line-height: 1px; }
.r4{ margin: 0px 1px; line-height: 1px; }


HTML

<div class="containercolour">
<div class="rtopcolour"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
your text here
<div class="rbottomcolour"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
</div>

It turns out that the issue I was running into was that there wasn't a } after one part of my code. Thanks for the help though.

Hello conphill,
There is an easy way to find small errors like that. Have a look at the links about validation in my signature line.