Grow your CSS skills. Land your dream job.

display: table-cell causing firefox and opera to ignore max-width and max-height properties

  • # October 29, 2012 at 4:24 pm

    If you would please go to http://debourg-dev.ch/syselcloud/erp-rh/ you will see that in firefox and opera the images are not using the max-height property. This is because I’m using display:table-cell to vertically align them, if I remove display: table-cell it works fine. How can I vertically align these images with display: table-cell and get firefox and opera to make use of the correct max-height value?

    The concerned code is:

    .partenaire-logo-wrap {
    height: 110px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    }

    .partenaire-logo-wrap img {
    max-height: 90px;
    }

    Thanks

    # October 29, 2012 at 5:26 pm

    I think you can reduce the amount of markup and simplify things.

    http://codepen.io/wolfcry911/pen/Dnczo

    you could set the anchor to display: block with a height and line-height of 90px (which will vertically align the images). No need for wrapping divs or extra classes. Note also, there’s no extra classes on the anchors, img, etc.

    Edit// this post has been edited a couple of times. Thank-you to Paulie for the first fix (the original post attempted code blocks). I changed it a bit further to clarify (there were two code blocks originally).

    # October 29, 2012 at 5:29 pm

    F this F’n markdown! I think Chris has done his forum community a great disservice with his latest theme makeover.

    arron118, I apologize, but I can’t be bothered to fix the preceding post. Maybe a forum mod can correct things for you to see.

    # October 30, 2012 at 2:48 am

    I don’t post code here for the very reason you mentioned.

    I just stick it in Codepen.

    _Post updated with CP link._

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".