936088 - Charity logo images overflowing container

Status: RESOLVED INCOMPLETE

(Core :: Layout: Tables, defect, P4)

Description

[Mike Taylor [:miketaylr]]

1) Go to https://omakasecharity.org/
2) Look at the charity logo images below the Discover your new favorite charities. blurb

Expected: They're sized relative to the parent container, just like in Chrome.
Actual: Large images and a horizontal scrollbar.

<ul class="partner-charities">
  <li class="partner-charity">
    <img alt="Lacocina logo" src="/assets/lacocina_logo-2124 9941d42af054482ac299a3462ef3.png">
  </li>  
  ...
</ul>

Relevant CSS:

.charities .partner-charities:before, .charities .partner-charities:after {
    content: " ";
    display: table;
}

.charities .partner-charity {
    display: table-cell;
    width: 19.2308%;
    padding: 1rem;
    vertical-align: middle;
    border-right: 1px dashed #DDDEE1;
}

.charities .partner-charity img {
    max-width: 75%;
}

Removing display:table-cell on the li makes it so the logos are sized appropriately.

Comment 1

[Mike Taylor [:miketaylr]]

Attachment: 936088.html

Reduced test case.

Comment 2

[Boris Zbarsky [:bzbarsky]]

Isn't this basically bug 823483 and company?

Comment 3

[Mike Taylor [:miketaylr]]

I think this server is dead:

> http --print=hH GET https://omakasecharity.org/

http: error: SSLError: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:590)

The http version redirects to https://codestarter.org/.