I am dealing with a Gallery view where I am using the UL LI elements with float left to create a gallery-like layout with multiple lines based on the content. However, I am encountering an issue where after the first line, the layout seems to malfunction in Firefox on both MAC and Win7.
Check out the link: (footer Gallery)
<ul class="gallery">
<li> <a href="#"> <img alt="video" src="/img/portfolios/video.jpg"> <span><i class="fa fa-link"></i></span> </a> </li>
<li> <a href="#"> <img alt="Concept Gallery" src="/img/portfolios/concept-gallery-2.jpg"> <span><i class="fa fa-link"></i></span> </a> </li>
<li> <a href="#"> <img alt="Concept Gallery" src="/img/portfolios/concept.jpg"> <span><i class="fa fa-link"></i></span> </a> </li>
<li> <a href="#"> <img alt="Residential Gallery" src="/img/portfolios/residential-gallery2.jpg"> <span><i class="fa fa-link"></i></span> </a> </li>
<li> <a href="#"> <img alt="Residential Gallery" src="/img/portfolios/residential-gallery-1.jpg"> <span><i class="fa fa-link"></i></span> </a> </li>
<li> <a href="#"> <img alt="Commercial Image" src="/img/portfolios/commercial-gallery-2.jpg"> <span><i class="fa fa-link"></i></span> </a> </li>
</ul>
Here is the CSS code:
.gallery {
list-style: none outside none;
margin: 0;
padding: 0;
}
.gallery li {
float: left;
width: 33%;
}
.comment-image, .gallery li, .post-small .image, .post-image, .portfolio-item {
display: block;
position: relative;
}