Floating unordered list items in a gallery display

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;
}

Answer №1

FireFox is causing inconsistent heights, resulting in an orphan in the last row. To fix this issue, consider including the following code in your gallery list items:

.gallery li {
   float: left;
   width: 33%;
   height:100px;
   overflow:hidden;
}

By implementing this code, you will ensure a consistent height for your image containers (li's) and trim any excess image height.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arranging Radio Buttons in a Row and Aligning a Radio Input Group Side by Side using Bootstrap 5

"I'm having a little issue with aligning radio buttons and a radio input group inline on the same line. The input group keeps moving to a new line for some reason. Can anyone help?" Below is the code snippet: <div class="d-flex flex ...

Div's background image displays flawlessly on Code Pen desktop, yet fails to appear when viewed on mobile devices

I am currently experiencing an issue with my background images not rendering properly on mobile devices, specifically safari and chrome on iPhone XR. Although they appear to work perfectly on Code Pen - resizing properly as the viewport shrinks and switchi ...

Tips for obtaining the entire date and time on one continuous line without any breaks or separation

Is there a way to retrieve the current date and time in the format of years, months, days, hours, minutes, seconds, and milliseconds like this? 201802281007475001 Currently, I am getting something like: 2018418112252159 This is my code so far: var dat ...

Using CSS to position elements absolutely while also adjusting the width of the div

In one section of my website, I have a specific div structure. This structure consists of two divs stacked on top of each other. The first div is divided into two parts: one part with a width of 63% and another part with a button. Beneath the first div, t ...

Disappearing Data in Chart.js When Window is Resized

I am utilizing the Chart.js library to present a line chart in a div that is enclosed within a <tr>. <tr class="item">...</tr> <tr class="item-details"> ... <div class="col-sm-6 col-xs-12 chart-pane"> <div clas ...

Creating dynamic text bubble to accommodate wrapped text in React using Material-UI (MUI)

I am currently developing a chat application using ReactJS/MUI, and I have encountered an issue with the sizing of the text bubbles. The bubble itself is implemented as a Typography component: <Typography variant="body1" sx={bubbleStyle}> ...

Icons in small circles surrounding text in HTML

I am trying to add a small icon or image next to my HTML code on a webpage, but I can't seem to get it to display properly. Currently, the image is showing above the code instead of beside it. How can I adjust my code to achieve this? Below is the cod ...

How can I set up keyboard shortcuts for different audio outputs on a Mac computer?

When it comes to functionality, my goal is to assign multiple keyboard shortcuts to different audio outputs. For example: cmd+F12 --> Airpods cmd+F11 --> Macbook speakers cmd+F10 --> Headphones I am a beginner in this area and I am eager to lear ...

The appearance of Google Font CSS may vary when retrieved using WGET

Uncovering an issue while attempting to dynamically fetch a Google Fonts css file to extract the font URL. The scenario looks like this: (Viewed in Chrome) Contrast that with: WGET -qO- http://fonts.googleapis.com/css?family=Droid+Sans Upon inspecti ...

What is the method to obtain the dimensions of the browser window using JavaScript?

In my JavaScript code, I am trying to retrieve the browser window size and then set the size of a div element accordingly. I have two div elements that should adjust based on the window size. For example, if the window size is 568px, div1 should be 38% of ...

Fancybox is experiencing some technical difficulties

Can anyone help me troubleshoot why my fancybox code isn't working properly after adding the script below to the body? Any thoughts on what might be causing this issue? $(document).ready(function() { $("a#example4").fancybox({ 'opa ...

`Eliminate a few bbcodes in the code snippet`

I am currently experiencing an issue with a bbcode parser that converts to HTML. Whenever I try to parse the code, I encounter problems with tags that are not in my approved set by the parser. For instance: The parser only permits [b], [center], and [i] t ...

Check if the browser is not Google Chrome before running the code in JavaScript

Related Search: Finding a secure way to detect Google Chrome using Javascript? Using Javascript to identify Google Chrome and apply CSS changes Is there a JavaScript statement that can be used to execute code only when the user is not using Google ...

Steps to display the error message in a modal popup header using Bootstrap 5

How can I display an error message in the header section using Bootstrap 5? <div class="modal-header"> <h5 class="modal-title">Add Email Group</h5> <div class="error">Invalid data, Please contac ...

Unable to reach the dropdown menu in CSS

Having trouble with creating a dropdown navigation bar? I've encountered an issue where the dropdown menu disappears as soon as I move my cursor off the buttons that reveal it. The menu itself displays properly, but accessing the drop down menu is pro ...

Clicking on text triggers image display

My journey in coding is just starting and I have a good understanding of the basics of HTML, CSS, Javascript, and jQuery. I am trying to make an image appear when I click on text but struggling with the implementation. I'm working on a restaurant web ...

What is the best way to place a floating elastic div on top of an elastic background and ensure that the div stays in place?

Looking for some creative input here. Don't have a specific question in mind, but open to ideas. Just to clarify, I want both the floating div and the background to resize as the window size changes, while keeping the div in the same position on top ...

Tips for capitalizing the first letter of a directory

I want to automatically convert all directories in the URI to lowercase if the user types them in uppercase. For example, https://example.com/hOmE should be converted to https://example.com/home. ...

Is your display:inline-block feature not functioning properly?

I am currently designing the homepage for this website and I am attempting to arrange the category divs under the header in a grid layout, with 3 divs per row. I have been trying to achieve this using display:inline-block, but so far, I can only get the d ...

Using jQuery to toggle visibility of various elements without needing specific identifiers

I have coded a HTML and JS snippet for displaying and hiding a div element, which is currently functioning correctly. However, I want to be able to use multiple boxes on a single page and I need a way to determine which box-header was clicked. Is there a ...