Background color width of
works fine in Chrome, but does not display properly in Safari

Question

I had started experimenting with webdev after long break and can not figure our why the Figcaption is not displayed properly in Safari.

I had created the website www.suezre.com and when viewed in Chrome or Firefox figcaption on the pictures looks good, but on Safari it takes much more space.

Any suggestion how i could fix this?

Thank you R

<figure>
  <img src="../img/budapest_our_home_city.png"/>
  <figcaption>Budapest, our home city</figcaption>
</figure>

figure {
position: relative;
}

figcaption {
  position: absolute;
  bottom: 0;
  padding:  15px;
  color: white;
  background-color: rgba( 29, 20, 17, .6);
  text-align: right;
  text-transform: uppercase;
  font-size: 1rem;
  width: 100%;
}

.banner img {
    max-width: 100%;
    text-align: center;
    display: block;
    margin: auto;
}

score 0 · Accepted Answer · edited May 23 '17 at 10:28

0

(Adding to the response to a similar question, here.)

I added display: table and margin: auto to figure, and display: table-caption to figcaption. Seemed to work fine on both after that.

edited May 23 '17 at 10:28

Community

1
1

answered Aug 17 '16 at 15:36

Toby Deshane

608
1
9
23

1

Hi Toby, thank you very much for this, i did try to display it in block and inline block, but not table. It does solve the issue! Thank you very much, will make a note of this for future! – Rustam Ismailov Aug 18 '16 at 09:43
Awesome. Learned something, myself. ;D – Toby Deshane Aug 18 '16 at 13:17

Background color width of works fine in Chrome, but does not display properly in Safari

1 Answers1

Background color width of
works fine in Chrome, but does not display properly in Safari