Absolute positioning error in Internet Explorer 11

Question

I have a page that displays correctly in Google Chrome, Firefox, and Opera, but has an error in Internet Explorer 11.

Here is the HTML, with the unnecessary parts stripped out:

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

And here is the CSS:

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


.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;
}

As you can see in this screenshot the #corner element is not positioned correctly.

I'm really not sure what to try, since this is specific to Internet Explorer. Been trying different things with the code over the past couple of hours with no luck so far.

Answer 1

try adding position:relative to the containing elements of div#corner, .container and/or .page-content

position:relative on a containing element sets the bounds of an absolutely positioned element equal to the parent element, rather than the whole page.

so a value of left:0px isn't equal to the top left side of the page, but the left side of the parent element.

It is somewhat surprising this only occurs in ie11 though as its a pretty straightforward issue which makes me suspect that there could easily be a secondary solution, but then again, having had to support IE since ~ie6 I guess I'm not really all that surprised if its just IE sucking.

Answer 2

Side note: Not sure if this is what you're trying to do, but min-height:100% does not make content's size to 100% the height of the screen. Replace that with this:

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

Anyway, you've set #corner to

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

And that's where IE is placing it, relative to the entire page. It's doing what you're telling it to do. With the other browsers, it's position is absolute compared to that header. But to take a guess, you probably wanted to set it to position: relative.

Answer 3

Just in case this helps someone else:

I had a similar issue. It looked like ie11 was ignoring the 'right' property:

right: -320px;

but it turned out to be because I had set the 'left' property to:

left: initial;

Turns out the 'initial' keyword is unsupported by ie11:

left: initial doesn't work in internet explorer