Image row sizing

[GovAgent]

I'm struggling to get a row containing three images to be sized correctly. The three images are equally sized (270px x 270px) and share a common background image (a shadow) which is sized 310px x 310px and is rendered when the mouse is hovered over any of the three images. jsFiddle here: jsFiddleI have tried inserting style="height:310px;" into the \[code\]td\[/code\] tag, the \[code\]tr\[/code\] tag and into the \[code\].center\[/code\] CSS, neither of which sizes the row correctly - the top and botom of the background shadow image are cut off.Does anyone have a pointer for me? Thank you.CSS:\[code\].center {text-align: center;}#images:hover {background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);background-repeat: no-repeat;background-position:center; }\[/code\]HTML:\[code\]<table style="width: 100%"> <tr> <td class="center"> <div id="images"> <object class="images" type="image/svg+xml" data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr"> <img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" /> </object> </div> </td> <td class="center"> <div id="images"> <object type="image/svg+xml" data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx"> <img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" /> </object> </div> </td> <td class="center"> <div id="images"> <object type="image/svg+xml" data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux"> <img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" /> </object> </div> </td> </tr></table>\[/code\]