Internet Explorer 11 encountering a flaw with absolute positioning

In my web page, everything looks good in Google Chrome, Firefox, and Opera, but I'm facing an issue with Internet Explorer 11.

Here is the simplified HTML:

<div class="container">
    <div class="page-content">
        <div id="corner"></div>
        ... content here
    </div>
</div>

And here is a snippet of the CSS code:

.container {
    margin: 0;
    min-height: 100%;
}

.page-content::after {
    content: "";
    display: block;
    height: 1px;
}
.page-content {
    background: linear-gradient(137deg, transparent 121px, #ffffff 20px) repeat scroll 0 0 rgba(0, 0, 0, 0);
    margin: 190px 100px 150px;
    max-width: 64em;
    padding: 10px 120px 145px;
    z-index: 2;
}
.page-content {
    margin: auto;
    max-width: 64em;
    padding: 0 1em 1em;
}

#corner {
    background-color: #ffffff;
    background-image: url("corner.png");
    display: block;
    height: 200px;
    left: 120px;
    position: absolute;
    top: 20px;
    width: 200px;
    z-index: -1;
}

The screenshot clearly shows that the positioning of the #corner element is off in Internet Explorer.

I've been troubleshooting this for some time now as it seems to be a browser-specific issue. Any insights or suggestions are greatly appreciated!

csscss-positioninternet-explorer-11

Answer №1

Try including position:relative in the containing elements of div#corner, .container, and/or .page-content

When you apply position:relative to a container, it sets the boundaries of an absolutely positioned element relative to that specific parent element rather than the entire page.

So, setting left:0px won't align the element with the top left corner of the page, but instead with the left side of its immediate parent.

It's a bit surprising that this issue only arises in IE11, considering it seems like a straightforward problem. This leads me to believe that there might be another solution available, but having dealt with supporting IE since early versions, I'm not entirely shocked if it turns out to be yet another case of IE causing headaches.

Answer №2

Quick note: It seems like there might be some confusion regarding the use of min-height:100%. This does not actually set the height of the content to 100% of the screen's height. Consider using the following CSS instead:

position:absolute;
top:0;
bottom:0;  
left:0;
right:0;

In your current setup, you've assigned #corner with the following styles:

position: absolute;
top: 20px;
left: 120px;

As a result, Internet Explorer is positioning it as per your instructions, relative to the entire page. Other browsers may treat it as absolute in relation to that header element. To achieve the desired effect, you may want to consider changing it to position: relative.

Answer №3

Here's something that might be useful for someone else:

I encountered a similar problem where it seemed like ie11 wasn't recognizing the 'right' property:

right: -320px;

It turned out that the issue was due to setting the 'left' property to:

left: initial;

Apparently, ie11 doesn't support the use of the 'initial' keyword:

left: initial doesn't work in internet explorer

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

Aligned DropDown

I am currently working on a menu that includes dropdown options. My goal is to align the dropdown menu directly under the selected item from the list. However, at the moment, it appears aligned to the left and the dropdown ul list is within the element tha ...

htmlcss

Turn the flipcard hover effect into an onclick action

After successfully creating interactive flip cards using CSS hover effects, I am now faced with the challenge of adapting them for mobile devices. I'm struggling to figure out how to translate my hover effects into onclick events for a mobile-friendl ...

jqueryhtmlcss

Compiling SCSS to CSS in Vue.js is a breeze

I am working on a vue js project that includes scss files. My goal is to compile these scss files into css and store them in the public folder. How can I achieve this? Should I make changes to the vue.config.js file? const path = require('path'); ...

cssvue.jssass

Customizing Text Placement in HTML Lists with CSS List-Style-Image

Is there a way to adjust the vertical positioning of the "Blahs" in the list so that they appear closer to the center of each list bullet in the image displayed on my HTML code below? Here is the snippet of code: <html> <style> li { margin-to ...

htmlcssimagelistposition

What causes the position: sticky; property to fail in React implementations?

Currently, I am facing a challenge in making two sidebars sticky so that they will follow as the user scrolls until they reach the bottom of the page. In my current editing project, this implementation seems to be more complex compared to other programs w ...

cssreactjs

Centering the Navbar in Bootstrap 3.0

I am currently in the process of migrating my project from Bootstrap 2.3.2 to Bootstrap 3. Unfortunately, I am facing issues with centering the navbar links, something that I was able to do easily before. Previously, I used this method: Center bootstrap&# ...

csstwitter-bootstrap-3

Rails Polymer is experiencing a glitch where the CSS and Polymer elements are not displaying correctly until a page refresh is

Whenever I first load a page, my polymer elements (like paper-input) fail to load their CSS properly. Here is an example of how the page looks before and after refreshing: https://i.sstatic.net/vsIpE.pnghttps://i.sstatic.net/YAFjP.png Below is the code sn ...

cssruby-on-railspolymer

Which internet browsing engine does Android leverage for phonegap applications?

Currently, I'm working on incorporating CSS animations into a phone gap project. Surprisingly, the animations work flawlessly on an iOS device but encounter issues on my Android device. Strangely, elements like dashed borders are not even showing up. ...

csscordova

What is the best way to achieve a seamless CSS transition for my sticky navigation bar?

Looking to create a sticky bar with a smooth CSS transition instead of the current rough effect. Any tips or hints would be greatly appreciated! For reference, I found the exact animation I'm aiming for on this website: https://css-tricks.com/ Here i ...

jquerycss

Is it possible to place Angular Material components using code?

Currently, I'm in the process of creating a responsive Angular application. Is there any way to adjust the height and position of the <mat-sidenav-content></mat-sidenav-content> component in Angular Material programmatically without relyi ...

javascriptcssangulartypescript

Attempting to choose everything with the exception of a singular element using the not() function in Jquery

Within the mosaic (div #mosaique) are various div elements. My goal is to make it so that when I click on a specific div, like #langages or #libraries, the other divs become opaque while the selected div undergoes a size change (which works correctly in t ...

javascriptjqueryhtmlcssselector

Hovering over a dropdown menu results in the color not completely filling the background of the desired element

.nav-main { background-color:#09F; width:100%; height:100px; color:#FFF; line-height:40px; } .nav-main .logo{ float:left; padding: 40px 5px; font-size:1.4em; line-height: 20px; } .nav-main > ul { margin:0; ...

csshoverbackground-color

Contrasting border with border-style

To eliminate all borders from my primefaces panelgrid component, I employ the following techniques: First method: .table, table td { border-style: hidden !important; } Second method: .table, table tr, table td { border: none !important; } Can ...

cssprimefaces

Adjusting the width of a DIV element within a table cell

In my ASP.NET application, I am facing an issue with table column widths not rendering as expected in the browser. Despite setting the column width to 100px, it appears as either 96px or 108px. The problem seems to be related to having a div inside the th ...

htmlcss

Can CSS be used for creating unique color combinations?

I am facing a challenge where I have two div elements with different transparent, colored backgrounds that overlap each other. My goal is to find a way to customize the color in the area where these elements overlap. For instance, if I blend red and blue ...

javascripthtmlcss

Tips for adjusting the font size options within the Autocomplete feature of Material UI Version 5

Is there a way to adjust the font size of the drop-down items? I have tried various methods to change the font size, including: How do I change Material UI Autocomplete font size? How to change fontsize of options in Material ui autocomplete? Unfortuna ...

cssreactjsmaterial-uiautocomplete

Enhancing nouislider jQuery slider with tick marks

I have integrated the noUIslider plugin () into one of my projects. I am seeking guidance on how to display tick marks below each value on the slider. This is the current initialization code for the slider: $slider.noUiSlider({ 'start': sta ...

javascriptjquerycssjquery-uinouislider

Detecting whether a browser is capable of supporting dark mode

One method to determine if dark mode is active is by using prefers-color-scheme: dark: const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; Is there a way to detect if a browser supports dark mode as well? (By "supports ...

javascriptcssbrowserdarkmode

Title Divider Right

I am looking to add a divider to the right of a section title on my webpage. Here is what I have tried: I attempted this code, but here is the result: Here is the code snippet: <h4 class="section-title">Lastest From Blog</h4> .section-title ...

htmlcss

Troubleshooting: Border not showing up in Tailwind CSS (React JS)

Below is the code snippet from my JSX file: import { useState, useEffect } from "react"; import { PropTypes } from "prop-types"; import { HashtagIcon } from "@heroicons/react/24/outline"; // Function to fetch categories from the API (temporary replaced wi ...

cssreactjsmaterial-uitailwind-cssborder