Why do Firefox and Opera ignore max-width inside of display: table-cell?

Question

The following code displays correctly in Chrome or IE (the image is 200px wide). In Firefox and Opera the max-width style is ignored completely. Why does this

Answer 1

I had the same problem. I solved it by doing this:

Tested in Opera and Fi

.classname {
    max-width: 100%;
    width: 100%;
    display: table-cell !important;}

Answer 2

add float: left to the div css

Answer 3

I got it working by using width: 100% instead of max-width: 100%.

Answer 4

The w3.org spec states that max-width does not apply to inline elements, so you will get inconsistent behavior across browsers. I'm not sure of your intended outcome, but you may achieve it if you set div img { display:block } and then align the img and p tags with floats instead of standard inline.

Answer 5

Setting width: 100% does fix the problem, but it introduces another one. In WordPress you don't want to set width: 100% to an image. What if the image is medium-size with a width of 300px, what then? I've been using classes to set the width to 50% on medium-size, but what if the image is smaller? Then it will get stretched. In webkit browsers it works with width: auto; max-width: 100%; but since Firefox, Opera and IE ignore that... that's a huge problem.

Answer 6

For a specific case, there's another workaround that I accidently found online: if you use display: table; + display: table-cell; to mimic a two (or more) column layout in a responsive site, try this instead: give the sidebar a widht of, say, 350px and the main content part of the site a width like width: calc(100% - 360px); . That did the trick for me, and the bonus was I needed a fixed width sidebar. I giess that will work with em's too.

Of course, this is js-dependent, but nowadays should be more than OK.