Adaptive Image Not Functioning in any Table

I have the exact same problem not only with Firefox but also with Opera.

Having the same issue.

I rewrote the template for the view grid format to use a "div" in place of the table, tr, and td tags. This allowed for the images to be adaptive.

I then wrote some CSS to float each of my column divs to the left. This broke adaptive images again.

The adaptive image will not work when it is added to any type of table. This could be a table created from Views with the format set to Table or Grid. This also occurs when an adaptive image is added to a standard table in the body of a node.

In a node body, add a table that is 100%. Then, add text to the table cell - this will scale properly.
In a node body, add a table that is 100%. Then, add an image and make it adaptive - this will not scale.

Any ideas?

Thank you,
Shane

To make adaptive images work within a table, they need to be in a block element. The style max-width does not work with inline elements.

To make this work for a view with grid style, I am using the following code:

table.views-view-grid, table.views-view-grid tbody, table.views-view-grid tbody tr, table.views-view-grid tbody tr td, table.views-view-grid tbody tr td a, table.views-view-grid tbody tr td a img {
  display:block;
}

table.views-view-grid tr {
  clear: left;
}

table.views-view-grid td {
    vertical-align: top;
    padding-bottom: 20px;
    margin-right:5px;
    float: left;
}

table.views-view-grid.cols-1 td { width: 95%; }
table.views-view-grid.cols-2 td { width: 45%; }
table.views-view-grid.cols-3 td { width: 28%; }
table.views-view-grid.cols-4 td { width: 21%; }
table.views-view-grid.cols-5 td { width: 16%; }
table.views-view-grid.cols-6 td { width: 13%; }
table.views-view-grid.cols-7 td { width: 11%; }
table.views-view-grid.cols-8 td { width: 9%; }
table.views-view-grid.cols-9 td { width: 7%; }
table.views-view-grid.cols-10 td { width: 5%; }

Hope this helps.

Thanks,
Shane

This can be fixed via css. #4 should work for you.

Sorry to reopen this.

But for a lack of a good gallery for D7 I've been using a homemade gallery with a custom template (see below).
As you can see it uses a table.

So whenever I tried using the apaptive image in the display settings of my gallery node the image in the teaser was displayed in its original size in Firefox, thus breaking the layout.

It worked very well in Safari and Chrome and on my iPhone, just not in Firefox. At first I thought it was a Firefox problem, until I found this threat.

Unfortunately my CSS skills are somewhat meager. I did manage to insert some custom CSS into the propper place inside the SKY-Settings. Only the above example is for a views grid and not for a normal table.

How would that CSS look for a notmal table like my mini-gallery?

<?php
/*
template - drupal.org/node/1224106#comment-4969404
Photo title - drupal.org/node/432846#comment-4125056
used at: www.highrockphoto.com
/*

/* change the column count to the number of photos you want to appear going across. (Adjust thumbnail size as needed) */
$columns = 3;
  $rows = array_chunk($items, $columns);
?>

<table class="mini-gallery">
  <tbody>
    <?php foreach ($rows as $row_number => $columns): ?>
      <?php
        $row_class = 'row-' . ($row_number + 1);
        if ($row_number == 0) {
          $row_class .= ' row-first';
        }
        if (count($rows) == ($row_number + 1)) {
          $row_class .= ' row-last';
        }
      ?>
      <tr class="<?php print $row_class; ?>">
        <?php foreach ($columns as $column_number => $item): ?>
          <td class="<?php print 'col-'. ($column_number + 1); ?>">
      <div class="photo-image"><?php print render($item); ?></div> 
      <div>
          </td>
        <?php endforeach; ?>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>

more info

This problem is so annoying. It can be fixed with this line of CSS

table {
    table-layout: fixed;
} 

#7 solves the problem

The following code worked for me. I removed some stuff from the code in #4:

table.views-view-grid, table.views-view-grid tbody, table.views-view-grid tbody tr, table.views-view-grid tbody tr td, table.views-view-grid tbody tr td a, table.views-view-grid tbody tr td a img {
  display:block;
}

table.views-view-grid td {
    vertical-align: top;
    float: left;
}

#4 worked perfectly. Thank you Shanefjordan!

#4 worked perfectly. Thank you Shanefjordan!