I came across a code snippet that displays correctly in Chrome, but in IE11 the height of the .wrapper div is not calculated accurately.
Any suggestions for correcting this issue on IE11? I have searched for solutions without finding one that resolves the problem definitively.
Make sure to eliminate the display:flex; flex;1 css line for selector .container
body {
background-color: gray;
}
.wrapper {
display: flex;
flex-direction: column;
flex: 1;
flex-wrap: nowrap;
background-image: linear-gradient(90deg, #f17e5d 35%, #f6d365 100%);
padding: 80px 0px;
padding-left: 10px;
padding-right: 10px;
justify-content: center;
}
.container {
background: #fff;
padding: 20px;
border-radius: 4px;
justify-content: center;
align-self: center;
width: 455px;
top: 5px;
position: relative;
flex-direction: column;
}
.headline {
padding: 20px;
background: #fff;
margin-bottom: 20px;
border-radius: 4px;
}
.orderedList {
font-style: italic;
font-size: 16px;
color: black;
padding: 18px;
position: relative;
top: -28px;
margin: 0;
}
.listItem {
padding: 0 5px;
}
.listContent {
padding: 1px;
font-style: normal;
color: black;
margin-left: 5px;
white-space: pre-line;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="headline">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to .
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to .
</div>
<div class="wrapper">
<div class="container">
<ol class="orderedList">
<li class="listItem">
<p class="listContent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
</p>
</li>
<li class="listItem">
<p class="listContent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
</p>
</li>
<li class="listItem">
<p class="listContent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
</p>
</li>
<li class="listItem">
<p class="listContent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
</p>
</li>
</ol>
</div>
</div>
</body>
</html>By simply removing the flex:1 property from the styles applied to your .wrapper element, the problem was successfully resolved.
According to https://caniuse.com/#search=flexbox (refer to Known Issues):
In Internet Explorer 10 and 11, containers using display: flex and flex-direction: column may not properly calculate the sizes of their flexed children if the container has a min-height but no explicit height property set.
I need advice on how to change the background-color of buttons using their IDs instead of index for better maintenance. Do you have any suggestions? Take a look at the code snippet below or run it from this jsfiddle: https://jsfiddle.net/p6kuf0zv/4/ // ...
I positioned a dropdown button next to an H1 tag, but I noticed that they are not perfectly aligned and I want to move the dropdown button up slightly. My project is utilizing Bootstrap 5.1.3 https://i.sstatic.net/muIwB.png <div class="ps-4 pt-4 ...
Is there a way to add a margin specifically to one tooltip element in bootstrap 4? $('[data-toggle="tooltip"]').tooltip() .tooltip.bs-tooltip-right{ margin-left: 30px; } button{ margin-top: 20px !important; } <link rel="stylesheet" ...
I am trying to make the select box height the same as the label (模板分類:). <select id="TamplateClass" style="height:1.5em">...</select> you can use CSS #TamplateClass{height:1.5em;} However, no matter what I try, the results are all th ...
I have been working on a jQuery code that needs to run just before a specific div is displayed on the page. Take a look at the snippet below as an example of what I am trying to achieve: $(document).ready(function(){ $('.article').on('m ...
I want to include an image on my HTML page only if it is present on my computer (meaning I provide a path and it verifies). If the image does not exist, I do not want anything to be displayed. How can I create a function that verifies if the image exists ...
My goal is to create a circular shape with segmented sectors without relying on external images. I am looking to achieve something like the example image provided below: I am open to utilizing HTML, CSS, or jQuery for this task, but if those options are n ...
Can someone help me with writing this code? I'm not very familiar with javascript. Here is the code I have: <ul id="theul"> <li id="firstli" style="display: something;"></li> <li id="secondli" style="display: something;"&g ...
I am a long-time user of stack overflow and have always found solutions to my issues. However, I am now facing a problem that has me completely stuck, prompting me to sign up and post this question. On my index page, I have multiple iframes with dynamic c ...
I attempted to create a rotating div using a simple code snippet: <!DOCTYPE html> <html> <head> <style> .spinner { width: 100px; height: 100px; margin: auto; border-radius: 50%; border-bottom: 1px solid #f00; animation ...
I'm attempting to create a functionality where asterisks in my string indicate list elements in an unordered list. $first_char = substr($p,0,1); if($first_char == '*'){ $p = '<ul>' . $p . '</li>&l ...
I recently implemented the <DatePicker/> component from Material-UI ( http://www.material-ui.com/#/components/date-picker ) in my project. I encountered an issue while trying to set the defaultDate property to the current date on my computer, as it r ...
My current challenge involves the functionality of submitting data at each step when clicking the 'Next' button. Each step has its own database table to store the information. I've attempted to post the data from each step into the database ...
I am working with a select HTML element that looks like this: <select required="" ng-model="studentGroup"> <option value="" selected="">--select group--</option> <option value="1">java 15-1</option> <option value="2">ja ...
I am trying to center a list of images both vertically and horizontally within their respective li. I want to achieve this using jQuery. How can I align the images in the center of each li element both horizontally and vertically? You can view a demo at c ...
Starting off my PHP page, there is a form with a save button. Beneath that, I display a list of items fetched from the database. Now, I want users to be able to select the items they desire by ticking them off. The issue I'm facing is that all the inf ...
Currently, I am utilizing jquery.tablesorter for table sorting functionality. However, I have a desire to apply a pattern to my table headers using a background-image. Unfortunately, when I do so, the .headerSortUp and .headerSortDown classes on the sorted ...
This might seem like a silly question, and yes, it is quite naive. I currently have two files stored on my server: index.html, file.txt Is there a simple way to prevent users from accessing file.txt directly by entering its URL like this: website.d ...
Is there a way to change the background color to white when the hamburger menu is activated in Tablet or Mobile view? I want to customize the appearance by switching the Logo, Title, Nav-links, and Menu button colors to black with a white background inste ...
Here is my code for a refresh button in the header of a Bootstrap 4 card: <div class="animated fadeIn"> <div class="row"> <div class="col-lg-12"> <div class="card"> <div class="card-header"> ...