IE Whitespace Issue not in FF/Chrome/Safari

I see all kinds of known whitespace issues with IE but I can't seem to pin down exactly whats going wrong with mine. On Safari/Firefox/Chrome everything looks great but on IE around some side boxes I have created I can't seem to get rid of whitespace between the images that create it. www.bubbug.com look on the left on the Categories and Featured box.
HTML:

<div class="leftBoxContainer" id="categories" style="width: 200px">
<div class="sidebox-header"><div class="sidebox-header-left"></div><div class="sidebox-header-mid"><h3 class="leftBoxHeading" id="categoriesHeading">Categories</h3></div><div class="sidebox-header-right"></div></div>
<div id="categoriesContent" class="sideBoxContent">
<div class="categories-top-list no-dots"><a class="category-top" href="http://bubbug.com/index.php?main_page=index&amp;cPath=1">Shirts</a></div>
<hr id="catBoxDivider" />
<a class="category-links" href="http://bubbug.com/index.php?main_page=specials">Specials ...</a><br />
<a class="category-links" href="http://bubbug.com/index.php?main_page=products_new">New Products ...</a><br />
<a class="category-links" href="http://bubbug.com/index.php?main_page=products_all">All Products ...</a>
</div><div class="sidebox-bottom"></div>
</div>
<br/>


This is the CSS that goes with it:

h3.leftBoxHeading, h3.rightBoxHeading {
font: bold 1.4em arial;
color: #ffffff;
padding: 5px 0 0 0;
}

h3.leftBoxHeading a, h3.rightBoxHeading a {
font: normal 13px verdana, arial;
color: #ffffff;
text-decoration: underline;
}


h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
color: #FFFF33;
text-decoration: none;
}
.sidebox-header {
display:inline-table;
width: 200px;
height: 31px;
}
.sidebox-header-mid {
background: url("../images/box_mid.png") repeat-x;
text-align:center;
}
.sidebox-header-left {
background: url("../images/box_left.png") no-repeat;
width:9px;
}
.sidebox-header-right {
background: url("../images/box_right.png") no-repeat;
width:8px;
}
.sidebox-header-left,.sidebox-header-right {
padding: 0 0 0 0em;
font: 0;
display:table-cell;
height: 100%;
line-height: 0px;
}
.sidebox-header-mid {
padding: 0 0 0 0em;
display:table-cell;
height: 100%;
}
.sidebox-bottom {
background: url("../images/box_bot.png") repeat-x;
padding: 0 0 0 0em;
display:block;
height:10px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}

Any ideas? Thanks a million, this is driving me crazy.

A link to your site would be great. Or post all your code please. Hard to recreate your issues without all your html and css.

I did post it. I'll post again however. http://www.bubbug.com

Well I see you have specified a margin on your heading tags. That's causing a small gap between your borders and your div sidebox-header-left.

Otherwise IE9 and FF7 looks the same.

No wait, removing the margin makes it look worse in IE...lol

It's driving me crazy, literally. it's like the left and right side of each of the three components that make up the top of the box are each adding a 1 px border. I thought it would be a line height issue or font size, but even going with 0 on those settings doesn't fix it.

I have fixed the issue if anyone would like to see what I ended up doing. I switched to inline-block display style using a combination of spacers and vertical align to get the box to line up correctly. Not my preferred method, but now it renders in all appropriately.