CODEWITHSUNDEEP
cssresponsive-designzurb-foundation
Jerome
Jerome

Reputation: 6189

Browser computing image sizes inconsistent using Foundation

As the enclosed image suggests, Three browsers are rendering the same content very differently.

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)

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.

Firefox 29.0.1 degrades nicely based on viewport size, but does not re-compute the images. enter image description here Am using Foundation (the minified file) version 5

Source HTML

<div class="row">
    <table cellpadding='0' cellspacing='0' border='0' align='center'>
      <tr align='center'>
        <td class="modelloframe">
            <div id="thumbwrapper">
              <a href="/uploads/catalog/image/8/3210.jpg" rel="prettyPhoto[]" title="3210F - Women&#x27;s-T 80/20"><img alt="Base_3210" src="/uploads/catalog/image/8/base_3210.jpg" /></a>
              <div class="text" id="thumbwrapper">3210F</div>
          </div>
        </td>

How can these values be computed so wildly differently? And why does Chrome really behave oddly

Upvotes: 1

Views: 100

Answers (2)

squashriddle
squashriddle

Reputation: 176

If you're using Foundation, you are going to need to follow their structure. After declaring your row, you need to declare your grid/columns. Let your grid be the parent container and you shouldn't need to mess with the position or width of your table. 

<div class="row">
  <div class="large-12 columns">
    <table cellpadding='0' cellspacing='0' border='0' align='center'>
      <tr align='center'>
        <td class="modelloframe">
          <div id="thumbwrapper">
            <a href="/uploads/catalog/image/8/3210.jpg" rel="prettyPhoto[]" title="3210F - Women&#x27;s-T 80/20"><img alt="Base_3210" src="/uploads/catalog/image/8/base_3210.jpg" /></a>
            <div class="text" id="thumbwrapper">3210F</div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>

The .column/.columns classes contain the necessary floats etc. to maintain your horizontal block ( row ).

Block grids are an excellent resource as well, but if you do not declare them within a column, you will not achieve your desired results.

Upvotes: 1

Jerome
Jerome

Reputation: 6189

block grid does give better responsive results. If someone stumbles upon this, beware of downloaded version. MIne did not have for each grid type the list-style defined to 'none'...

<div class="row">
      <ul class=small-block-grid-6>
             <li>...          </li>
      </ul>
</div>

Upvotes: 0

Related Questions