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

What is the best way to clear the selected option in a dropdown menu when choosing a new field element?

html <div class="row-fluid together"> <div class="span3"> <p> <label for="typeofmailerradio1" class="radio"><input type="radio" id="typeofmailerradio1" name="typeofmailerradio" value="Postcards" />Postcards& ...

javascriptjqueryhtmlcssdrop-down-menu

Incorporate Vimeo video with full-width display

When embedding a Vimeo video on my website, I use the following code: <div class="fys-fp-content-wrapper"> <div id="fys-fp-video"> </div> </div> #fys-fp-video { position: relative; padding-bottom: 56.25%; padding-top: ...

htmlcssvideovimeo

Altering the placement of a single element from floating to fixed positioning in CSS

Currently in the process of designing a basic website, I am looking to modify the behavior of the navigation bar on the left-hand side. I want it to remain fixed in its position so that users can scroll through the page without losing sight of it. My main ...

htmlcsspositioningcss-position

Arranging the placement of list-group-item buttons

Looking for a way to create a list-group-item with two buttons that are equal in height and aligned to the right? Take a look at this example below: While I have the basic structure in place, I'm having trouble getting the buttons to position correct ...

htmlcss

Text overlapping image causing hover state interference

I'm feeling completely lost right now. My goal is to have the title of each project displayed in the center of the screen when you hover over the respective project images. I've resorted to using jQuery for this because it seems like the most str ...

jquerycssimagetypeshover

Is dividing a container into equal sections possible with flexbox?

Is there a way to create an HTML/CSS structure that divides a fixed-size container into three sections horizontally? The first section should expand based on its content, while the remaining two sections should evenly split the leftover space, with scrollb ...

htmlcssflexbox

Avoiding conflicts between banners, text, and images for HTML/CSS design

I'm having an issue with the banner I created for my project. It seems to be overlapping with text and images, hiding behind them. How can I fix this? Unfortunately, I can't post the link to my project here due to other files present. The specif ...

javascripthtmlcsswebweb-deployment

Steps for adding a navbar that slides horizontally and overlaps other links on a webpage

I am attempting to design a sliding navigation menu using JQuery. The concept involves having multiple main sections, each with several subsections. When a user hovers over a section, the subsections will expand horizontally. If another section is current ...

jqueryhtmlcssnavbar

How can you apply a class to a different element by hovering over one element?

Is there a way to darken the rest of the page when a user hovers over the menu bar on my website? I've been playing around with jQuery but can't seem to get it right. Any suggestions? I'm looking to add a class '.darken' to #conte ...

javascriptjqueryhtmlcss

Resize the images and align them side by side

I have a container with a maximum width of 1400px. Inside this container, there are two images of different sizes. I want to align them in a row using flexbox so that they fit within the 1400px width and still maintain a visually appealing appearance as sh ...

htmlcssflexbox

Ensure that the inner div has a height of 100%

Can someone help me troubleshoot my HTML code? <div id="container"> <div id="left-container"> </div> <div id="right-container"> </div> </div> Although the container is set to 100% height, the #left_con ...

htmlcss

Position tables on the right side of adjacent tables

There are two tables named id="BFCategories" and "BMICategories". Additionally, there are two other tables with id="BFTable" and "BMITable" BFCategories should come after BFTable, while BMICategories should follow BMITable. How can I a ...

htmlcss

Elements are randomly glitching out with CSS transitions in Firefox

Chrome is working perfectly for me, but when I switch to Firefox it behaves differently than expected I am attempting to create a simple animation (utilizing transitions) that continuously runs on mouseover and smoothly returns to the starting position on ...

javascriptjquerycsscss-transitionscss-transforms

Styling menus with CSS

I'm struggling with a CSS issue while attempting to add a 1px solid black line after each element in my drop-down table menu. The current appearance of my menu is causing some trouble. What I desire for it to look like involves applying border: 1px s ...

htmlcss

The border on the right side of the accordion does not continue down

After creating an HTML page with an accordion in one div and a menu in another, I added a simple border styling to the right side of the menu using CSS properties like height, border-right-width, border-right-style, and border-right-color. height:100%; b ...

jquerycssaccordion

Using Jquery to set values for css properties

I've recently started using jquery and I have a task related to a drop-down menu that I'm struggling with: if (scrnwidth <= 761) { if (display was block) { //Defaultly testi has display:none property. testi = m ...

javascriptjquerycss

Ensure the div element remains fixed at the top of the page

I created a script to identify when I reach the navigation bar div element and then change its CSS to have a fixed position at the top. However, I am encountering an issue where instead of staying fixed, it jumps back to the beginning of the screen and fli ...

javascriptcss

When inserting <img>, unwanted gaps appear between div elements

When I have <img> in the child divs, there is some space between them and a blue stripe appears under the image. How do I make them stack perfectly without any gaps? I am new to HTML and CSS and trying to learn for marketing purposes. Any help or ad ...

htmlcss

Darkening the background of HTML and CSS text to black

I'm having trouble removing the black background from the navigation. It doesn't appear to be styled in black when I inspect each element individually. Here is an image showing the issue: https://i.stack.imgur.com/gvbn8.png @charset "UTF-8"; ...

htmlcsstextbackgroundoutline

Arranging Divs Inside a Container Div - Dealing with Overflow

I am in the process of developing a website that includes a unique structure that I have not encountered before. This layout involves joining multiple sections within a wrapper. As this is my first time attempting such a layout, I am encountering some chal ...

csshtml