Boxes without images (css/html)

Boxes without images.
the colors can be mod. for different box colors

THE CSS

.xsnazzy h1, .zsnazzy h1 {
margin:0;
font-size:1.2em;
font-family: verdana;
padding:0 10px 5px 10px;
border-bottom:1px solid #444;
}
.xsnazzy p, .zsnazzy p {
margin:0;
padding:5px 10px;
font-size:.8em;
font-family: verdana;
}
.xsnazzy {
background-color:#fff ;
width:300px;
float:left;
margin:0 3px;
}

.xtop, .xbottom {
display:block;
background:#fff;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff;
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px;
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}

.xboxcontent {
display:block;
border:0 solid #444;
border-width:0 1px;
height:auto;
}
* html .xboxcontent {
height:1px;
}

.color_a {
background:#c9ba65;
color:#fff;
}
.color_b {
background:#1B3F8B;
color:#fff;
}
.color_c {
background:#FF7F00;
color:#fff;
}
.color_d {
background:#b2ab9b;
color:#fff;
}


THE HTML


<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_">
</b><b class="xb3 color_c"></b><b class="xb4 color_c"></b></b>
<div class="xboxcontent">
<h1 class="color_c">***TITLE OF BOX***</h1>
<p>***CONTENT OF BOX***</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>


EXAPMLE

On my homepage, jesseismagic.com


Tell me what you think, or PM me.

 

If someone has a tiny ass screen, it woudd look like poo.

Jared

 

true... but its fine in 800x600