How to Fix Absolute Positioning in IE8

How to fix Absolute Positioning In IE8?

Declare a doctype. I'd encourage you to use the HTML5 doctype:

<!DOCTYPE html>

IE8 ignores absolute positioning and margin:auto

I found out what's going on, and it's not the doctype, nor anything about the code that needs changes.

It's that jsbin's edit page doesn't support IE8 - the exact same demo viewed in full* is styled correctly in IE8.

In edit mode, jsbin seems to apply quirks mode or something odd like that when viewed in IE9 with IE8 browser mode and IE8 document standards. Surprisingly, the demo also works with IE7 browser mode and document standards (quirks mode off).

*the link goes to a later revision, but the only change was to remove all the attributes from the <html> tag - I had added these for testing. So, the demo is fine without those attributes, and with the html5 doctype.

IE8 bottom:0 in position:absolute behaves like position:fixed

Great, I got Tumbleweed badge for super unpopular question.

While waiting someone to help me here I solved it myself (as usual). I did it by putting bottom_menu in a wrapper div pretty similar to the old container, only difference is that is has no overflow: hidden; and is not directly inside the body. That fixed it by some strange reason. Maybe it will help somebody.

IE8 absolute positioned elements within button element are wrong

You need to add an overflow:visible to the button css.

Here is a fiddle https://jsfiddle.net/innerurge1/os2e9c2j/7/. Also you should swap out the divs with spans as this is more semantic. Divs are not "allowed" in buttons, because they are block elements and buttons are inline.

.parent{
    position: relative;
    width: 200px;
    height: 200px;
    border: 0;
    background: gray;
    text-align : left;
    overflow:visible;
}

IE8 Issue with fixed and absolute position

You could do this with javascript. Here's an example, using jQuery, that I would try:

var calculatedTop = $(window).innerHeight() / 2;
$('#YourDiv').css('top', calculatedTop);

Edit: I've expanded this a bit to recalculate the top position when the user scrolls. Hopefully this helps with your IE8 problem.

$(document).ready(function(){
    var reposition = function() {
        var calculatedTop = $(window).innerHeight() / 2;
        calculatedTop += $(document).scrollTop();
        $('#YourDiv').css('top', calculatedTop);
    }

    // call reposition immediately on initial load
    reposition();

    // attach to scroll event
    $(window).on('scroll', function(){
        reposition();
    });
});

Absolute positioning error in Internet Explorer 11

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.

IE 8 absolute positioned element outside its parent clipping problem

I solved it using this How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

My solution is a little modified, just put an empty div with class "ie_rgba_fix" inside the container you want transparent, add this CSS someplace IE specific and the children will not clip anymore as with overflow: hidden

/* IE8 RGB A workaround */
div.ie_rgba_fix
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66C6DEA2,endColorstr=#66C6DEA2)";
}

How to Fix Absolute Positioning in IE8