What are the solutions to troubleshoot the image and column flexbox issue in Internet Explorer?

I've created a flexible template using bootstrap4 CSS that works well in all browsers except IE 11.0.

The issue seems to be with the .d-flex class, which I used to ensure that all my columns have the same height. I've tried finding a solution online, but no luck so far. Removing this class makes everything appear fine except for the uniform height of the columns.

Interestingly, the images are displayed at full size in IE. I've attempted various fixes from sources like Bootstrap Image Responsive messed up on IE without any success. Without the .d-flex class, I can fit the image in the container, but there is still a significant amount of clickable white space beneath the image and text.

cssbootstrap-4flexboxinternet-explorer-11

Answer №1

Answered using Internet Explorer 11 as a guest. (G-CYR)

.card {
  max-width: 99.99%;/* prevent image width distortion */
}


.card * {
  flex: 0 0 auto;/* prevents large empty gaps */
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Custom Title Here</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div class="container-fluid">
    <div class="row" style="border-bottom:#dedede solid 1px; min-width:615px !important;">
      <div class="brd_black align-self-center bg-white vertical-align col-4 col-xs-4" style="height:90px;">
        <a href="index.html"><img src="http://playak.com/media/reviews/photos/original/ca/22/a7/boats_490-1.jpg" alt=""></a>
      </div>
      <div class="brd_black col-8 bg-white vertical-align">
        <h4>Custom Title Here</h4>
      </div>
    </div>
    <!-- 2nd row -->
    <div class="row mt-4">
      <div class="brd_black align-self-center col">&nbsp;</div>
      <div class="brd_black align-self-center col-10">
        <div class="row">
          <div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3">
            <h4 class="text-dark">Custom Title 2:</h4>
            <div class="alert alert-warning font-weight-bold" role="alert">Unique text here.</div>
            <!-- content -->
          </div>
          <div class="brd_black align-top col-6">
            <!-- Carousel -->
            <!-- below carousel -->
            <!-- /Carousel -->
          </div>
        </div>
      </div>
      <div class="brd_black align-self-center col">&nbsp;</div>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->

</body>

</html>

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

Adding a CSS style to a specific child element

Here is an example snippet <html> <head> <style> .test > input { //this selector is incorrect. color:red; } </style> </head> <body> <div class="test"> <di ...

htmlcss

The hover effect's color isn't functioning as intended

Something very peculiar... I'm looking to modify the text color and background color of the links when they are hovered over. Here's the code snippet: CSS: #link-menu a { color:white; display:block; height:100%; width: 100%; ...

htmlcsscss-selectors

Any advice on how to horizontally center my css slideshow?

After using jsfiddle for the file, I encountered an issue with centering the slideshow at the bottom. Despite my efforts, it remains aligned to the left margin. Check out the end results here: https://jsfiddle.net/n6kae2rn/ https://jsfiddle.net/n6kae2rn ...

htmlcssslideshowcentering

What is the method for creating two separate columns that can scroll independently?

I am faced with a challenge involving a modal that contains two columns. My goal is to make these columns scrollable independently of each other while ensuring the scrollbar remains hidden. Thus far, I have managed to make the row scrollable with a hidden ...

csstwitter-bootstrapbootstrap-4

Incorporating timed hover effects in React applications

Take a look at the codesandbox example I'm currently working on implementing a modal that appears after a delay when hovering over a specific div. However, I've encountered some challenges. For instance, if the timeout is set to 1000ms and you h ...

javascripthtmlcssreactjstypescript

How to Use CSS to Perfectly Align Form Elements in the Center of

No matter what I try, I just can't seem to get these form elements centered on the page using CSS. Here is my code snippet: http://jsfiddle.net/VJLst/1/ <style> #divQuizFillBlank { margin-left: auto; margin-right: auto; } #textQuizFill ...

htmlcss

Tips for optimizing Jquery selectors to streamline recurring functions

I have 9 "service node" divs in my HTML code, each containing a hidden div and a button that triggers the rotation of the button by 45 degrees and reveals the hidden div. The challenge I am facing is that I have been using repetitive functions for each ser ...

htmljquerycssfunctionjquery-selectors

The div is not completely encased by the fieldset

I have utilized fieldset to generate a titled border around a div. Here is the code snippet: <div class="form-group col-xs-12"> <fieldset class="field_set col-xs-12"> <legend style="font-weight:bold;font-size:20px"> ...

htmlcssangularjs

Enable the ability for anchor links to be clickable when the CSS media print format is used to generate

To illustrate: <a href="https://www.google.com">Google anchor link</a> on the website, it displays as: Google anchor link When printed, it shows as: Google anchor link(https://www.google.com) To address this issue, I included in the CSS: ...

javascriptjquerycsspdf

The background color in the HTML file remains unchanged

Hello everyone, this is my debut post here. I can't seem to figure out why the background color isn't changing for me. Even though I have applied the bg color property, it's not taking effect as expected. <body bgcolor="#f0ffff"> T ...

htmlcsscolorsbackground

Generating SVG images that show up as black in light mode and switch to light colors in dark mode

I am currently working on a website that has the option to switch between light and dark mode, and I need my logo to adjust accordingly. The black elements of my logo should appear black in dark mode and light in light mode. I attempted using the CSS cod ...

htmlcsssvg

What is the best way to integrate an image gallery with twitter bootstrap?

I'm having trouble implementing an image gallery on my index page. Despite my efforts, I can't seem to achieve the desired behavior. Here's a snippet of my code: .container .row .col-md-8.col-sm-8.col-xs-8 - 4.times do |i| ...

cssimagetwitter-bootstrap

Dealing with CSS specificity issues when incorporating material-ui for React into a WordPress plugin

Struggling to integrate material-ui for react in a wordpress plugin due to conflict with wordpress's styling in forms.css file. Looking for a solution that doesn't require complete restyling of material-ui components to override the default style ...

cssreactjswordpressmaterial-uicss-specificity

Tips for transferring input values between two PHP pages

I need to save various input values in a MySQL database, such as first name, last name, phone number, and mobile number. With a select query, I can retrieve all the entries from the database and display them on a single webpage. When a user clicks on a sp ...

phpmysqlhtmlcss

Strategies for reducing the amount of space between cards in Bootstrap 4

After creating 4 cards using Bootstrap version 4.5, I noticed that the spacing is not right. I'm struggling to reduce the spacing between the cards. Have a look at the image below if you're still confused: https://i.sstatic.net/RrJLL.jpg .car ...

htmlcssbootstrap-4

Issue with JavaScript ScrollTop

Simply put, I am trying to determine the total scroll size for a text area in a unit that scrollTop can align with. However, I am at a loss on how to do so. I've tried scrollHeight and various other methods without success. Any advice or suggestions ...

javascripthtmlcssdom

Struggling with CSS to display images

Struggling to align my images within the designated red lines in the CSS sections I created. Can't seem to get it right. Here's my HTML: <!-- Your code goes here --> <div class="container"> <section class="left"> <h1& ...

htmlcss

Update the text on Bootstrap Tooltip when it is clicked

I am looking to update the content of my tooltip when it is clicked. Below is the current code snippet I am using: function myFunction() { var copyText = document.getElementById("myInput"); copyText.select(); document.execCommand("copy"); ...

javascriptjqueryhtmlbootstrap-4tooltip

Container for Magazines using HTML and CSS

Looking to develop a digital magazine application with smooth swipe transitions and fade in effects when swiping left and right. I attempted using jQuery.mobile, but struggled with adapting the background image height. My goal is to create a universal web ...

javascripthtmlcssjquery-mobile

Bootstrap 4's hamburger icon in the navbar toggler displaying only two lines, rather than three

I have created a navbar using Bootstrap 4. Although the navbar is functional, I am facing an issue that I have not been able to resolve on my own. When collapsed, the hamburger icon only displays two lines instead of three. I suspect that the problem lie ...

htmlcsstwitter-bootstrapbootstrap-4