"max-width" inside tables not working Firefox
So, there's the following CSS in the native layout of Lithium:
/****** image and video content */
#lia-body .lia-content .lia-message-body img,
body.mceContentBody img, body.mce-content-body img,
#lia-body .lia-content .lia-panel-tooltip img
{ max-width:100%; }
So, this is causing an issue. Because when you insert an image into a table it works fine in Chrome. However, in Firefox, those images will break the containers borders.
I still want the image to be responsive, even when it's within an inline container. I know that one method that works is to change to the following:
/****** image and video content */
#lia-body .lia-content .lia-message-body img,
body.mceContentBody img, body.mce-content-body img,
#lia-body .lia-content .lia-panel-tooltip img
{ width:100%; height:auto;}But then for smaller images that aren't as wide as the KB, they will be stretched out, so that's not a perfect solution.
Just wondering if anyone else found out a good way to work around this.
Thanks!
The CSS spec doesnt seem to like that possibility Quelyn.
If the containing block's width depends on this element's width, then the resulting > layout is undefined in CSS 2.1.Firefox is the only browser behaving as intended by the spec.
See discussion here: https://bugzilla.mozilla.org/show_bug.cgi?id=975632I believe that max width only behaves as expected if all elements in the chain have a width.
IE every parent object up to body needs to have a width defined for CSS to calculate the max-width correctly.
