issue with displaying three images side by side in Internet Explorer

Hello everyone, I have created a code to display 3 images in a row. It works perfectly in Firefox but not in Internet Explorer. Here is my code:

echo "<div class=\"container mod\"><ul id=\"three-col\" class=\"press\">";

while($cat = $db->sql_fetchrow($catinfo)) {

$counter++; 

echo '
<li>
<div class="post-content">
        <a class="zoom1">
        <img src="'.$galsettings[setImgDir].'/'.$cat[galCatLocation].'/'.$cat[galCatImg].'" alt="'.$cat[galCatName].'" />
        </a>
        </div>
        <span class="post-bottom"></span>           
        <div class="meta">
        <p>'.$cat[galCatName].'</p>';

        echo ' </div>';

        echo '</li>';

if ( $counter == 3 ) { 
echo '<ul>'; 
$counter = 0; 
} 
}

echo "</ul></div>";

Answer №1

When using Internet Explorer, the issue with the second row is caused by the varying height of the row above it. To fix this problem, there are two solutions available:

1)

Include a specific height in the style rule for "#three-col li":

#three-col li {
  background:url("../img/bg-post-top.png") no-repeat scroll 0 0 transparent;
  float:left;
  height:312px;
  margin:3em 20px 0 0;
  overflow:hidden;
  padding-top:20px;
  position:relative;
  width:300px;
}

2)

Another option is to insert an element that clears the space between rows.

If you have already attempted this, consider the following approach:

  ...
</ul>
<div style="clear: both;">&nbsp;</div>
<ul>
  ...

Answer №2

After some troubleshooting, I was able to identify the issue.

Interestingly, simply moving that condition statement to the end of the while loop resolved the problem entirely.

echo "<div class=\"container mod\"><ul id=\"three-col\" class=\"press\">";

while($cat = $db->sql_fetchrow($catinfo)) {

echo '
        <li>

        echo '</li>';


}
if ( $counter == 3 ) { 
echo '</ul> 
<div style="clear: both;">&nbsp;</div> 
<ul id=\"three-col\"> '; 
$counter = 0; 
} 
echo "</ul></div>";

Special thanks to Sohnee for providing such a helpful solution!

Answer №3

Consider including this CSS snippet in your code:

section.content-area {display:flex;}
section ul li {display:flex;}

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

The content at the center of the page is shifting to the right side when the browser is resized

I am currently working on creating a random quote generator at the following link: http://codepen.io/Kestvir/pen/peqjZZ. During the html/css aspect of the project, I have run into an issue with the content inside a transparent background. Whenever I resi ...

The feature of Jquery click and cursor: pointer only focuses on a single element at a

Recently, I created a navbar that includes a dropdown feature. I encountered an issue where I wanted the dropdown to show up when clicking on the navbar-profile class (which contains the profile picture, name, and chevron icon) in the top right corner. Ho ...

What causes the Bootstrap navbar dropdown to be partially obscured in IE8?

While working on a specific project, I have encountered an issue where everything seems to function properly in newer browsers except for IE8 during testing. The dropdown menu is functional, however, it appears hidden behind the main content area labeled ...

Tips for designing a CSS border that remains consistent in size throughout

I'm trying to figure out how to adjust my code so that the border surrounding my text stays in position and changes size when I input longer text. Here is the code I'm currently working with: <h1 id="result" style="color:black; font-family: B ...

Ways to Place Image and Icons at the Bottom of a Video with CSS

I'm looking to enhance my video by adding images and icons using CSS, but I'm not sure how to go about it. The image that will serve as a profile picture and the icons should be similar to the ones shown in the image below: https://i.sstatic.ne ...

Optimizing Your Click-to-Call Phone Number for Your Website

When building a responsive webpage using Twitter Bootstrap, I noticed that certain elements are only visible on smaller resolutions like tablets and phones. On an iPhone with OS7, I found that leaving phone numbers as plain text without a link allows the ...

Why isn't my .gif animation appearing on Google Chrome? Can anyone suggest a reason for this issue?

const urlToLoad = "winners.php"; const ajaxLoader = '<div class="preloaders"><img src="img/preloader.gif" alt="Loading..."></div>'; $(".page").click(function(){ $(".main").html(ajaxLoader).load(urlToLoad); }); I am trying ...

Utilizing jquery for displaying and hiding notifications - Notyfy in action

Recently, I've started working with jQuery and have come across the useful Notyfy jQuery plugin. My goal is to display a notification bar with specific messages based on certain conditions such as success or error. I'm trying to achieve somethin ...

ensuring that all items in the owl Carousel have equal heights

My current project involves creating an Owl Carousel. Here is the code I have implemented so far: <div class="owl-carousel owl-theme"> @foreach (var item in Model.Books) { <div class="item"> ...

The problem with "em" in CSS: preventing it from scaling based on the font-size of a particular element

My website predominantly utilizes "em" for design over "px," which is meant to be more compatible with modern browsers. Most of the text is set at font-size:1em, where 1em equals 16px as a default without specific specification. However, there are sectio ...

Moving icon that appears when hovering over a menu button

Before diving into this, please take a moment to visit the following website to understand my goal: You'll notice there is a noticeable RED arrow positioned below the menu. What I aim to accomplish is... when I hover over a menu button, the arrow smo ...

Issue with displaying sidebar using blockquote in Bootstrap 4.1.3

After implementing the blockquote class in Bootstrap 4.1.3, all the effects were successfully applied, except for the sidebar. Here's a comparison of how it appears in tutorials: https://i.sstatic.net/qNXrV.png And here is how it appears in my Chrom ...

Center the element vertically if its height is less than the container's height, but let its height become 100% if the container's height is

I am trying to achieve a layout where an element (.figure) is centered horizontally when it is shorter than its container (.timeline-content), but matches the height of its container when longer. The height of the container changes based on its parent. T ...

React - utilize a variable as the value for an HTML element and update it whenever the variable undergoes a change

I'm on a mission to accomplish the following tasks: 1.) Initialize a variable called X with some text content. 2.) Render an HTML paragraph element that displays the text from variable X. 3.) Include an HTML Input field for users to modify the content ...

Using a web browser control to choose a radio button and then submit the form

Currently, I am attempting to use my WebBrowser control in order to select a radio button and also click on a submit button that doesn't have any id or name attached. Below is the snippet of HTML code from the webpage: <form method="post> & ...

Add a click event listener to the body element using a button click, without causing it to trigger

What is the current situation: A button is clicked by the user The menu opens (list items display = block) The function to close the menu is connected to the <body> The function to close the menu is immediately triggered, causing the menu to close ...

The data is not being displayed in the table

I am encountering an issue while attempting to populate the table with data received through props by looping over it. Unfortunately, the data is not rendering on the UI :( However, when I manually input data, it does show up. Below is my code: Code for P ...

"Utilizing AngularJS to set an element's position as fixed relative to a different

Imagine an app that can place input text fields on top of an image, creating a workspace. The challenge is to position these fields using specific coordinates (top, left, width, height) that are relative to the image itself (top/left = 0/0). How can one ac ...

What steps can I take to ensure that this list remains fixed at the bottom of the page?

Looking to have this content positioned at the very bottom of my webpage without any empty space below it. I'm having trouble applying the usual CSS to achieve this. .footer li{ display:inline; } <footer> <div cla ...

Issues with retrieving the output of a function nested within another function through an ajax request

I am attempting to use jQuery to add the results of an ajax call to a paragraph. My goal is to extract the "myResult" variable from the inner getResult function and transfer it to the outer buildParagraph function. Unfortunately, the returned value is und ...