Display discrepancies between Internet Explorer and Firefox

I have been working on a website project using Bootstrap. The design looks great, but I am facing an issue with the items being displayed incorrectly on IE and Firefox, while they render perfectly on Chrome.

To troubleshoot, I checked the CSS properties in developer tools for all three browsers and found no discrepancies. Then, I adjusted the width of the div to > 33% to ensure it displays properly in a two-column format across all browsers. Initially, the div had a width of 25%, defined by .col-sm-3 from bootstrap.min.css.

Can anyone suggest a solution to display four items in a row as intended? Below are screenshots from each browser:

And here is the code:

HTML Markup

(HTML code)

And the CSS

(CSS code)

For reference, I am using IE 11, Firefox 38.0.5, and Chrome 43 (64-bit) on Windows 8.1. Any suggestions for fixing this issue would be greatly appreciated.

EDIT: Adding 

<div class="clearfix"></div>
resolved the problem. I inserted it after the first row's four items.

htmlcssinternet-explorerfirefoxtwitter-bootstrap-3

Answer №1

Implementing clearfix divs as detailed in this resource successfully resolved the display problems.

The solution that worked for me involved inserting 

<div class="clearfix"></div>
after the four elements in the initial row.

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

Does including the "max-height" property within a table result in a height of zero?

Check out the code snippet below (you can also view a demo on JsFiddle): #outer { display: table; height: 200px; width: 100%; background: gray; } #inner { width: 100%; background: blue; max-height: 100%; } <div id="outer" ...

htmlcsscss-tables

How can you vertically center an icon button in Material UI?

Looking for help with aligning elements in this code snippet: <TextField id="outlined-basic" label="22Keyword" defaultValue={"test123"} variant="outlined" /> <IconButton aria-label="delete&q ...

cssreactjstypescriptmaterial-ui

Strategies for resolving minor validation challenges (Almost complete, just a few finishing touches needed ...)

This question was originally posted in Spanish on es.stackoverflow.com by Julian Dumitrel: I had planned to make a record, step by step, where I had 3 different steps all within one <form>. After finishing my form validator successfully, I encounte ...

javascriptjqueryhtmlformsvalidation

Adjust the size of images that are aligned horizontally using HTML

I am facing a simple issue that I just can't seem to solve. My problem involves two images aligned horizontally within a div container. Each image has specified width, minimum and maximum widths, while the parent div's width is set to 100%. How c ...

htmlcssimage

Activate this event to function on a .click() action

When the submit button is clicked, I want it to only show/hide the divs if the select option value is between 2-6. If the value is 1 (disabled option), nothing should happen when the button is clicked. <select id="brand_bu" name="selected" class="form- ...

javascriptjqueryhtml

Positioning of the navigation menu

After customizing my Bootstrap navbar, I noticed that when the responsive size changes to mobile, the burger menu opens on the left side. Is there a way to move it to the right? Any help would be appreciated. Here is the HTML code: <!DOCTYPE html> ...

htmlcssbootstrap-4

Form tag abruptly disappears in Chrome inspector

As I delved into someone's .asp code, I stumbled upon a concerning discovery - an unclosed HTML tag. To unravel this mystery, I turned to Chrome and its inspector tool only to find the missing tag right there in front of me! Puzzled, I returned to th ...

phphtmlgoogle-chrome-devtools

What is the best way to use JavaScript to replace &amp;#8364; with &#8364;?

Currently, I am in the process of troubleshooting an issue with a forum where HTML entities are not being displayed correctly. Unfortunately, the owner of the forum is missing in action, so I am attempting to address this using a browser extension. Here&a ...

javascripthtml

The login feature seems to be experiencing difficulties with navigation, and I suspect that the problem lies within the .js script and its positioning in the program

The sign-in program seems to be having trouble navigating properly. I suspect the issue lies within the .js code and its placement. The layout consists of a title, two text input boxes, and two buttons that are not functioning correctly (the main issue). A ...

javascripthtmlangularjsnavigationionic-framework

Incorporate a particular video directly into HTML code

I'm having trouble embedding a video into my html web page. The video I want to use is located at . I tried using the following code snippet based on the source code of another page where the video is currently embedded: <embed height="100%" width ...

htmlvideo

Click here for a hyperlink with an underline that is the same width

As we work on our website, we want a unique feature where links are underlined when hovered over, with the underline staying the same width regardless of the length of the link text. How can we achieve this using CSS/jQuery/Javascript? ...

jqueryhtmlcss

Styling Vuetify components such as v-textarea using custom CSS for a unique design

Is there a way to style the underlying html textarea of a vuetify v-textarea using CSS? I'm trying to customize the line height, font family, color, and more of the v-textarea component. Simply adding a class to it doesn't seem to work: <v-tex ...

cssvue.jsvuetify.js

Using Vue.js to dynamically assign CSS classes based on variables

Is it possible to achieve this with a dynamic class like the following? <div :class="'outofstock.item_' + item.id ? 'bg-green-500' : 'bg-red-500' "> I have been struggling to find the correct syntax for this. T ...

cssvue.jsvariables

Incorporate a new CSS class into a DIV using JavaScript

Sample HTML: <div id="bar" class="style_one"></div> Is there a way to include the class style_two without deleting style_one? final outcome: <div id="bar" class="style_one style_two"></div> ...

javascripthtmlcss

Injecting SVG styling into HTML using the content tag and CSS

I am working with 3 different files: index.html <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <i class="logo myRed" aria-hidden="true"></i> ...

htmlcsssvgfont-awesome

In Outlook, images are always shown in their true dimensions

While everything is working perfectly fine in Gmail, Yahoo, and Hotmail, there seems to be an issue with the display of the logo image on Outlook. The custom width and height settings are not being applied properly, resulting in the logo being displayed ...

asp.nethtmlcssemailoutlook

Exploring the integration of HTML and CSS within the Django framework

Trying to implement a star rating in a specific HTML file The file I am working on is called book_detail.html {% extends "base.html" %} {% load static %} {% block title %} Block Detail Page {% endblock title %} {% block sidenav %} {% for item ...

htmlcssdjangodjango-staticfiles

Flex and scrollbar problem when using Edge or Internet Explorer

Encountering an issue with Edge/IE when using flexbox. To prevent content overflow, overflow-x: auto is used. With a column flex direction and flex-grow:1 on content items, overflow-y should not be necessary. However, the scrollbar appears above the conten ...

htmlcssflexboxscrollbarmicrosoft-edge

How to Safely Swap Background Images on a Website Using CSS without Affecting the Body

How can I create a background similar to this one, but using an image instead of the blue background? Take a look at I noticed that resizing the browser window doesn't affect the background. What steps should I take to achieve this effect? ...

css

Is it possible to extract the value from the JSON response using this.responseText?

Having trouble extracting data from a json response This is the HTML code I am using. index.html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head ...

javascriptphphtmljson