title: image and containing table not displaying
body: <p>I have a webpage I'm working on that has a few shapes and an overlaid image all within container tables. </p>
  
  <p>This looks fine in Firefox and Chrome but the entire right column gets cropped down to a small row in Safari. </p>
  
  <p>Here is the jsfiddle: <a href="http://jsfiddle.net/colej4586/4pXXG/42/" rel="nofollow">http://jsfiddle.net/colej4586/4pXXG/42/</a></p>
  
  <p>I'm thinking maybe this is the CSS that is causing it but I really have no idea.</p>
  
  <pre><code> .overlay {
  /* Pull the content up over the banner */
  margin: 5% 0 0% 0%;
  padding: 1em;
  color:white;
  /* Using this will make sure that it goes over the element, not under */
  position: relative;
  /*z-index:4;*/
  width:80%;    
  }
  </code></pre>