A ‘funny’ recently presented itself. In the chrome browser, avatars were not showing up, despite they being there in the html code.
My first thought when I hear of browsers responding differently is to check html validation – browsers often cope with errors but sometimes not.
In this case, it was the css that turned out to be the problem.
An invaluable tool to debug these things is the ‘inspect element’ firebugs or chromes and the ability to deselect or add css to see what is overriding what. See http://bigemployee.com/4-simple-techniques-to-quickly-debug-and-fix-your-css-code-in-almost-any-browser/
Fairly quickly one could see that somehow the inline attributes were being overwritten.
Image attributes overwritten
Scrolling back up through the css to see what might be overwriting that css, I paused thoughtfully at a image max-width and unticked and reticked some css.
As soon as I unticked the max-width the images reappeared in chrome.
Undo Max Width
A quick web search showed that others had encountered this before and had some suggestions on overcoming this. It seems Chrome interprets the rule differently from Firefox. It assumes the image can freely be shrunk, and with a long string of text in the cell next door, it squeezes the images.
- http://boulderinformationservices.wordpress.com/2013/01/18/chrome-shrinks-images-in-table-cells/
- https://drupal.org/node/1291704 -image max-width causes images to collapse in table cells in Chrome unless a width is set on the table column
So some possible solutions appear to be:
- remove the max-width attempt to be responsive, or
- set a fixed table width
- maybe set a fixed column width