Snazzy corners and IE7 problem

[steveb8385]

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;
}

[steveb8385]

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