X-Cart forums - Vertical align text with 'display: table-cell' in IE

Hi, I've been trying to set up vertically aligned text in a table cell, so that product names of one line or two lines will be vertically centred.
I'm using the code on this site:

http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html#

You can see the site I am working on here:

http://www.mrdtrading.co.uk/home.php?shopkey=martin

I am using IE8, and haven't see what the site looks like in IE7 yet, but IE8 uses the altskin.IE7.css file to style the site, and uses this CSS to do so:

Code:

.outerContainer{position:relative;}

.outerContainer .innerContainer{position:absolute;top:50%;}

.outerContainer .innerContainer h3 {position:relative;top:-50%;}

When I turn off these styles using IE Developer Tools, it makes no difference. When I turn off the styles that are in altskin.css, it also makes no difference in IE8:

Code:

.outerContainer{display:table;width:322px;height:50px;background:url(images/2column/product_head_bg.gif) no-repeat 0 0;overflow:hidden;}

.innerContainer{display:table-cell;vertical-align:middle;width:320px;height:55px;}

I'm sure this is something simple that I'm doing wrong, because the www.andy-howard.com site displays perfectly in IE8. Any help would be very much appreciated.