title: Browser computing image sizes inconsistent using Foundation
body: <p>As the enclosed image suggests, Three browsers are rendering the same content <strong>very</strong> differently.</p>
  
  <p>Chrome Version 24.0.1312.57 (bottom) is collapsing images and computing significantly smaller sizes earlier than 2 counterparts.  Amazing how Chrome just re-sizes the images and creates a half-blank screen although a sticky navigation bar fills the entire screen (as does a bottom background image)</p>
  
  <p>Safari 5.1.10 (6534.59.10) (middle) handles a smaller viewport, but in sort order, with a smaller viewport, computes new image sizes even smaller than Chrome.</p>
  
  <p>Firefox 29.0.1 degrades nicely based on viewport size, but does <strong>not</strong> re-compute the images.
  <img src="https://i.stack.imgur.com/CQ53b.png" alt="enter image description here">
  Am using Foundation (the minified file) version 5</p>
  
  <p>Source HTML</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;table cellpadding='0' cellspacing='0' border='0' align='center'&gt;
        &lt;tr align='center'&gt;
          &lt;td class="modelloframe"&gt;
              &lt;div id="thumbwrapper"&gt;
                &lt;a href="/uploads/catalog/image/8/3210.jpg" rel="prettyPhoto[]" title="3210F - Women&amp;#x27;s-T 80/20"&gt;&lt;img alt="Base_3210" src="/uploads/catalog/image/8/base_3210.jpg" /&gt;&lt;/a&gt;
                &lt;div class="text" id="thumbwrapper"&gt;3210F&lt;/div&gt;
            &lt;/div&gt;
          &lt;/td&gt;
  </code></pre>
  
  <p>How can these values be computed so wildly differently?  And why does Chrome really behave oddly</p>