image max-width causes images to collapse in table cells in Chrome unless a width is set on the table column

Is it possible to see the actual output on a live site, I dont need to see the error I just want to look at a situation in which this happens so I can look at the surrounding markup and other CSS that might be on those pages.

Looks like its because its in a table cell with no width set on it, so the table cell collapses. Interesting that Chrome does not honor the style attributes on the image even though they should be applied, which Firefox is doing correctly afaict.

I am in two minds about this - the max-width certainly enables images to scale with smaller screens (for some reason the responsive layout appears to be disabled on your site, I assume you have changed the layout settings to disable this), so it may be something to document rather than removing from the theme - that images inside tables need a width set on the table column for Chrome and IE lte 8.

That is something I have thought about more in the past week or so, being able to disable it completely is not such a crazy idea. For now I want to mark this specific issue as documentation and get it documented, then shift to a new issue to discuss or strongly consider the option to disable the responsive layout.

Same bug affects pixture_reloaded (i.e. the same max-width is in the css there). It was on a table produced by attachment & a second page to a gmap View (which is probably not relevant). It took me a long time to trace, partly because I was Googling for a Chrome bug without adding the theme name to my search query.

I should really check if there is a bug against Chrome for this, since this really is a Chrome bug. I will submit one if I cannot find and report back here.

It is not just Chrome. Removing this rule also overcame my bug with IE8 on At-Commerce.

Yeah, but if you remove that rule you loose the scaling images in every browser, what was the bug in IE8, I can probably fix that with a workaround.

#5 was implemented in 7.x-3.x, a setting to disable the layout. However, in 3.x I also moved the flexible media/images CSS to the subtheme and it loads by default, but its easy to remove if you don't want it.

I can confirm that we have been seeing this issue in:

Chrome
Safari
Ipad Safari
Mobile (Android)

Setting the table cell width did fix the issue. While this is not ideal (more work for the content editors and they'll probably forget to do it), it is an okay stop-gap measure for us.

Same issue here with 2.x. In my case, I have a two column table with 400 x 300 images in one, and long text in the other. This worked nicely:

/* disable responsive images when screen greater than 600px */
@media screen and (min-width: 600px){
        td.views-field-field-image img{ max-width: none; }
        }

/* fixed text column width when screen less than 600px for proper responsive image resizing */
@media screen and (max-width: 600px){
        td.views-field-field-text{ width: 50%; }
        }

Has there been any resolution to this error? I can verify that it shows up in Chrome v21.0.1180.83 m and Safari v5.1.7. I have created a view that includes thumbnails in a table cell. The thumbnails show up as 38X38 images, even though they are actually 100X100.

The following workaround works in this situation:

.view-id-listings .views-field-field-main-image {
width : 100px;
}

however, that defeats the responsiveness of the theme.

Gilbert

I found some discussion on the topic of Chrome's handling of images in tables in Google Groups. From what I can tell, there seems to be an issue of timing. If the table is rendered before the image is, the cell has no width set so it defaults to the smallest size (whatever that is). Then the image, which has a max-width of 100%, is rendered at that small size. You can pick up that discussion here -> http://productforums.google.com/forum/#!topic/chrome/3kJTjIeP2yc

In any event, the following work-around seemed to work and it didn't lock the size of the image.

.view-id-listings .views-field-field-main-image {
width : 10%;
height : auto;
}

table.views-table {
width : 100%;
}

The 10% width addresses the particular dimensions in my case. The thumbnail needs to be displayed 100X100 in a standard screen size so 10% of that allows adequate room for it. Changing the setting to max-width : 100% results in the thumbs shrinking again.

Now to test these styles in the various breakpoints in the media queries. Should be fun.

Gilbert

Thanks for the link Gilbert. Seems the sure fire way around such issues is to make sure there is a width on the table or the table column - I usually go for the table column width and set 100% on the table itself, which is why this is used by default in AT Subtheme (so the tables always have an explicit width set).

Gentlemen and Ladies - thank you so much. I was banging my head against my monitor on this one all afternoon and your solution above sorted it.

This is why Drupal is the best !

@Jeff Burnz - thanks for this workaround which makes sense if you are dealing with tables that have columns. In my particular case I am dealing with tables grouped into rows with Views Accordion and can't find a way to integrate the max-width: 100% for responsive image styling across the site and the problem with the images in the Views table cell collapsing.

Does anyone have a similar case to this. Any suggestions much appreciated.

If I remove img {max-width: 100%} from the main stylesheet it affects all images on the site so they don't render gracefully. However, if I keep this style setting the thumbnails in the Views table are becoming tiny dots on smaller screens...

I played around with some css styles ie.

.views-field-body {
	img {
	width: 100%;
	height: auto;
	}
}

nested img tag as per preprocessed stylesheets. This made the thumbnail images in the Views Accordion table increase in size so they are visible, but the sizing of each image is still inconsistent. Still looking for a solution that renders all the thumbnails a consistent size in the table across all browsers...

type correction

Also facing same problem with https://www.drupal.org/project/business_responsive_theme (though it is not adaptivetheme subtheme ) when image is placed in second column of two column table format.

Posting here because as it is about css in general.

update: posted too early : (... these two links mentioned same solution and worked for me

#1580078-7: Adaptive Image Not Functioning in any Table
http://stackoverflow.com/a/24665759/538212

I wish Drupal.org has a way to highlight the solution with a color or something.
It is hard to figure out which solution solved the problem just by the dialogue.

Do is the solution this? Or using an upgrade to the theme?

.view-id-listings .views-field-field-main-image {
width : 10%;
height : auto;
}

table.views-table {
width : 100%;
}

It is supposed to be fixed in the current version of Adaptive Theme - so no need to look for a solution.

When applying the the matter to other themes, there is of course no single piece of code which fixes similar issues, you just need to understand and apply the principle, which come across from reading the thread, especially Jeff's comments (e.g. https://www.drupal.org/node/1291704#comment-6772850)