Img not showing in Safari, does show in Chrome

Question

I feel like I'm missing something here. I've got a website for a client where the images show up perfect in Chrome and just fail to appear entirely in Safari. I'm using only HTML and CSS. Any ideas? The live site is at angelahartley.net

HTML:

<ul class="gallery">
<li><img src="img/home1.jpg" title="newborn greta: by Josh Muir" alt="newborn greta in arms"></li>
<li><img src="img/home2.jpg" title="newborn greta: by Josh Muir" alt="baby greta on a rainbow"></li>
<li><img src="img/home3.jpg" title="photo by Santa Cruz Birth Photography" alt="baby, mom, and dad in birthing pool"></li>
</ul>

CSS:

    .gallery {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    background-color: #947960;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
}
.gallery li {
    float: left;
    width: 33.33333333%;
    margin: 4px .5% 1px .5%;
    padding: 0 ;

}
img {
    max-width: 100%;
    border: 1px solid #00565E;
    border-radius: 2.5%;
}

score 0 · Answer 1 · answered Feb 28 '15 at 05:40

0

Remove all display rules from the css and it should work.

answered Feb 28 '15 at 05:40

Usama Noman

503
1
4
10

score 0 · Answer 2 · answered Feb 28 '15 at 05:50

It is your display:-webkit-box; that seems to be the issue. Remove it and it should be fine.

.gallery {
width: 100%;
margin: 0 auto;
padding: 0;
list-style: none;
background-color: #947960;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
}

score 0 · Accepted Answer · answered Feb 28 '15 at 07:39

Add position:relative; to your .gallery li{} class

You do not need any other updates.

The problem is the z-index gets lost unless you define the position as something other than the default 'static' value for position.

.gallery li{
   position:relative;
}

Img not showing in Safari, does show in Chrome

3 Answers3