CODEWITHSUNDEEP
htmlcsssafari
Vikas Ghodke
Vikas Ghodke

Reputation: 6655

Percentage Height Behaving Differently on Firefox and Safari MAC

i am having a weird problem here, height of li elements behave differently in firefox and safari.

HERE IS THE FIDDLE DEMO

Another Simple Demo Suggested by Mr Lister
See above demo in firefox and safari and its not working.

HTML

<ul class="projectlist clearfix">
<li class="project">
    <a href="#" rel="16" class="ajax">
                <img width="340" height="236" src="http://placekitten.com/200/300" class="attachment-post-thumbnail wp-post-image" alt="5" />         
        <div class="projectinfo">
            <div class="meta">
                <h4>Something</h4>
                <h6><em>asdfasdf</em></h6>
            </div>
        </div>
    </a>
</li>
</ul>

CSS

.portfolio {
    width: 100%
}
.projectlist {
    width: 100%;
    margin-top: 50px;
    background: transparent
}
.projectlist li {
    width: 25%;
    height: 20%;
    float: left
}
.projectlist a {
    display: block;
    padding-bottom: 85px;
    position: relative
}
.projectlist a img {
    width: 100%;
    height: 100%;
}
.projectinfo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 100
}

Firefox

enter image description here

Safari

enter image description here

Upvotes: 1

Views: 853

Answers (1)

Ali Bassam
Ali Bassam

Reputation: 9959

The Answer as from the Comments:

Use only width:100%; on the image and remove height: 100%;. This will tell the browser to resize the image in a way to respect the 100% of the width, or more like, fix your width then stretch your legs.

This answer needs some improvement.

Upvotes: 1

Related Questions