Display issues in IE11 due to margin and width settings on div element

Hey guys, need some help with a coding issue I'm having:

.content__wrapper {
  min-height: 325px;
}

.content__img {
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
}

.tab__content {
  margin-left: 30%;
  width: 50%;
  margin: 0 auto;
  margin-top: 20px;
  z-index: 2;
}

blockquote {
  color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="content__wrapper d-flex flex-row justify-content-center">

  <div class="content__img" style="background-image:url(https://placeimg.com/360/360/any);">
    <div class="tab__content ">
      <div class="content__content">
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </blockquote>
      </div>
    </div>
  </div>

</div>

The issue I'm having is that in Chrome and Firefox the image loads correctly, but in IE11 it appears very small and the .tab__content width is ignored, causing a horizontal scrollbar to appear.

Anyone have any insights on why this might be happening?

htmlcssinternet-explorer-11

Answer №1

To modify the minimum height of content__wrapper, update it to content__img instead.

Here is the CSS code:

.content__img {
  min-height: 325px;
}

Answer №2

It has been noted that Internet Explorer tends to ignore the min-height property when no specific height is set.

This behavior is also discussed here: caniuse

Interestingly, in versions 10 and 11 of Internet Explorer, a min-height declaration on a column-direction flex container does not affect the container's flex items.

A workaround for this issue could be:

.content__wrapper {
  height: 1px;
  min-height: 325px;
}


.content__wrapper {
  height: 1px;
  min-height: 325px;
}

.content__img {
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
}

.tab__content {
  margin-left: 30%;
  width: 50%;
  margin: 0 auto;
  margin-top: 20px;
  z-index: 2;
}

blockquote {
  color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="content__wrapper d-flex flex-row justify-content-center">

    <div class="content__img" style="background-image:url(https://placeimg.com/360/360/any);">
        <div class="tab__content ">
            <div class="content__content">
                <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et dolore magna aliqua. </blockquote>
            </div>
        </div>
    </div>

</div>

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

Encountering a jQuery error while trying to utilize the $window.load

I have a code snippet that is functioning well when wrapped within a document ready event: jQuery(document).ready(function($) { $('tr[data-name="background_colour"] input.wp-color-picker').each(function() { //this section works fin ...

javascriptjqueryhtmlcssiframe

Issues with image sizing on mobile devices

After finalizing my header design, I encountered an issue with the mobile version of the website. The images in the header are not responsive and do not adapt well to different screen sizes. I need assistance converting the header design into functional co ...

htmlcss

Looking to center an image in front of text?

I am looking to position an image in front of text and center it. <div id="info"> <ul> <h3> <li>NAME: Mohit Kumar Singh</li> <li>CONTACT:1234567890</li> <li>ADDE ...

html

Tips for updating the default value of an HTML <select> tag using a customized <select> option

I'm struggling to update the value of my <select><option value=""></option></select> based on a custom select option I created. Customizing select options using JS and jQuery is necessary since they can't be easi ...

javascripthtmljquery

Managing Container Items using Flexbox

I have successfully created a small website using two flex containers, but now I want to know if it is possible to achieve the same layout with just one flexbox container on the parent class. I've been attempting to do this, but so far my efforts hav ...

htmlcssuser-interfaceflexbox

Struggling to connect CSS and JS files in an HTML document

I'm encountering issues while trying to connect CSS and JS files to my HTML file's head section. Below is the HTML code snippet: <!DOCTYPE html> <html lang="en"> <head> <title>title</title> <link rel=" ...

htmlcssexpress

The child elements are stacking vertically despite implementing inline-block

I have a container with 100% width. I am trying to position three divs inside it next to each other, all with the same height as the parent. Unfortunately, despite setting the display property to inline-block, they are not aligning properly and appear sta ...

htmlcsstwitter-bootstrapbootstrap-4

Ensuring the security of updated data

As I explore various websites, including SO and my own, I have noticed a common practice of storing row IDs of data retrieved from a database in an HTML attribute. This data can be manipulated by the user on the client side and potentially sent to the serv ...

phphtmlmysql

Need a second opinion on my jQuery Mobile website project for organizing notes by category - can you give it a once

Seeking advice and confirmation on a project idea. I have been contemplating creating a personalized mobile site for myself to maintain consistent access from both web and mobile platforms, initially targeting Android 4 and higher. The main concept is to ...

androidruby-on-railshtmlsqlitejquery-mobile

The Google Maps JavaScript API is failing to load

While constructing a website that utilizes the Google Maps JS API, I encountered an issue where the map remains blank without any errors appearing in the Google Chrome Console. HTML code: <div id="map-container-5" class="z-depth-1" style="height: 200 ...

javascripthtml

Tips for aligning text to the left instead of the right when it exceeds container width in IE 11

Within the div, there is text with a 5px margin on the right. When the container div narrows, the text overflows from the container and loses the right margin. Is it feasible to maintain this margin on the right side while allowing the text to overflow fro ...

htmlcss

Struggling to line up text and image next to each other?

I have inserted an image and some text. The text consists of 1 <h6> tag and 2 <p> tags. I attempted to use the float:left property, but the content did not display side by side as intended. Here is the code from content.js: <div className ...

htmlcss

Tips for incorporating captions into a slideshow

I've been experimenting with different methods to include captions in my slideshow, but haven't had much success. I simply want to add a div at the bottom of each image. Do I need to modify my script or should I consider adding something else? H ...

jqueryhtmlcss

Could someone please clarify a specific aspect of how floats work?

Could someone simplify this explanation for me? A float is positioned next to a line box if there is a vertical space that meets these conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margi ...

cssspecifications

How to make a dynamic Div tag using ASP.Net

I am working on a Web Application where I have been using multiple div elements to display pop ups. Now, my new requirement is to generate dynamic div containers for these popups, with the content of each div coming directly from the Database. Is there a ...

c#asp.netweb-applicationsdynamichtml

Capturing keydown events exclusively in the topmost layer of the HTML document

Currently, I am developing a web application that includes an underlying HTML file with some JavaScript functionality that I cannot modify. In my code, I create a layer on top of this page using CSS with z-index: 1000;. However, I am facing an issue where ...

javascripthtmljquery

Leveraging Angular 2 directives in TypeScript to bind a value from a custom control to an HTML control

I have created a unique custom directive named "my-text-box", and within this directive, I am utilizing the HTML control <input>. I want to pass values from my custom control to the HTML input control. In Angular 1, I would simply do something like & ...

htmltypescriptangularangular2-directives

Display a division in C# MVC 4 when a boolean value is true by using @Html.DropDownList

I have multiple divs stacked on top of each other, and I want another div to appear when a certain value is selected. I'm familiar with using JavaScript for this task, but how can I achieve it using Razor? Below is a snippet of my code: <div id=" ...

c#javascriptcssasp.net-mvcrazor

The Owl Carousel arrows and dots are perfectly aligned at the same level

When using the owl carousel, I encountered an issue where the arrows and dots are aligned at the same height. I would like to have the arrows centered vertically while keeping the dots at the bottom as they are currently positioned. However, whenever I att ...

jquerycssowl-carousel

What is the best way to transfer all li elements with a certain CSS style to a different ul?

I have a task to relocate all the <li style="display:none;"> elements that are currently nested under the <ul id="bob"> into another <ul id="cat">. During this relocation process, it is important that all the classes, ids, and CSS style ...

javascriptjqueryhtmlcsshtml-lists