title: Image row sizing
body: <p>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: <a href="http://jsfiddle.net/cvh2013/5WsMr/" rel="nofollow">jsFiddle</a></p>
  
  <p>I 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.</p>
  
  <p>Does anyone have a pointer for me? Thank you.</p>
  
  <p>CSS:</p>
  
  <pre><code>.center {
  text-align: center;
  }
  
  #images:hover {
  background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
  background-repeat: no-repeat;
  background-position:center;     
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table style="width: 100%"&gt;
      &lt;tr&gt;
              &lt;td class="center"&gt;
                  &lt;div id="images"&gt;
                  &lt;object class="images" type="image/svg+xml"
                      data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr"&gt;
                      &lt;img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" /&gt;
                  &lt;/object&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td class="center"&gt;
                  &lt;div id="images"&gt;
                  &lt;object type="image/svg+xml"
                      data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx"&gt;
                      &lt;img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" /&gt;
                  &lt;/object&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td class="center"&gt;
                  &lt;div id="images"&gt;
                  &lt;object type="image/svg+xml"
                      data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux"&gt;
                      &lt;img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" /&gt;
                  &lt;/object&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>