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.

Fink

have you tried giving page-content relative positioning? if so and not working, can you reproduce this in a jsfiddle? – Hsining

Did you try adding position: relative; to .page-content? – Urn

Adding position:relative to page-content, and one other container, solved the problem. Rooster, since you commented first if you post it as an answer I'll accept it. Thank you both for your help, I also up-voted both of your comments. – Fink

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.

Hsining

Thanks for the help. And yeah, it was just IE11. Everything displayed 100% in the other browsers I checked it in. – Fink

Looks like this might have fixed a problem I had. I had some relative positioning that made image alignment look right on Firefox & Chrome, but IE was messed up. By implementing the above, all three are now consistent in their (wrong but easily fixable) alignment! – Collbaith

if still messed up in IE for anybody, look if you have left (or right) specified – Charcoal

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.

Ison

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

Mudguard