Snazzy corners and IE7 problem

I have a problem with snazzy corners on my centre boxes. They look fine in IE8 and Firefox but in IE7 I get a small space separating the box at the bottom, just cant figure it out.
I have included the css and code from my tpl_modules_featured_products.php below. this is my site http://eden-chocolates.co.uk/index.php?main_page=index
Any help with this is much appreciated, its driving me nuts

<?php /** * Module Template * * @package templateSystem * @copyright Copyright 2003-2005 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license <http://www.zen-cart.com/license/2_0.txt> GNU Public License V2.0 * @version $Id: tpl_modules_featured_products.php 2935 2006-02-01 11:12:40Z birdbrain $ */ $zc_show_featured = false; include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_FEATURED_PRODUCTS_MODULE)); ?> <!-- bof: featured products --> <?php if ($zc_show_featured == true) { ?> <div class="centerBoxWrapper" id="featuredProducts"> <div class="xsnazzy" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width:100%; ?>"> <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b> <div class="xboxcontent"> <?php /** * require the list_box_content template to display the product */ require($template->get_template_dir('tpl_columnar_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_display.php');

?>

</div> <b class="xbottom"><b class="xb4"></b><b class="xb3"></b> <b class="xb2"></b><b class="xb1"></b></b> </div> </div> <?php } ?> <!-- eof: featured products -->

/*
Snazzy css
*/
.xsnazzy h1, .zsnazzy h1 {
margin:0;
font-size:1.2em;
padding:0 10px 5px 10px;
border-bottom:1px solid #444;
}
.xsnazzy p, .zsnazzy p {
margin:0;
padding:5px 10px;
font-size:10px;
}
.xsnazzy {
width:150px;
*/
float:left; */
padding: 5px 0;
background-color: transparent;
}

.xtop, .xbottom {
display:block;
background:transparent;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background-image: url(../images/sidebak.gif);
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-top-color: #444;
border-right-color: #444;
border-bottom-color: #444;
border-left-color: #444;
}
.xb1 {
margin:0 5px;
background-color: #444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}

.xboxcontent {
Sdisplay:block;
border-top-width: 0;
border-right-width: 1px;
border-bottom-width: 0;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #444;
border-right-color: #444;
border-bottom-color: #444;
border-left-color: #444;
background-repeat: repeat;
background-image: url(../images/sidebak.gif);
height: 1%;
}

• html .xboxcontent {
  height:1px;
  }

.color_a {
background:#c9ba65;
color:#fff;
}
.color_b {
background:#d4d8bd;
color:#000;
}
.color_c {
background:#758279;
color:#fff;
}
.color_d {
background:#b2ab9b;
color:#000;
}

I found some sample snazzy corners and they were the same so I guess that is the way it is. I switched to Nifty for the centre box and that worked. Took a while to figure it out though. Haven't managed to get a border around it yet though