IE7 Relative/Absolute Positioning Bug with Dynamically Modified Page Content

IE7 relative/absolute positioning bug with dynamically modified page content

This is related to the "hasLayout bug" of IE. The relatively positioned #panel parent doesn't have layout and hence IE forgets to redraw its children when it get resized/repositioned.

The problem will go if you add overflow: hidden; to the relatively positioned #panel parent.

#panel { position: relative; overflow: hidden; border: solid 1px black; } 

In depth background information about this IE bug can be found in the excellent reference "On having layout" and then for your particular problem specifically the chapter "Relatively positioned elements":

Note that position: relative does not trigger hasLayout, which leads to some rendering errors, mostly disappearing or misplaced content. Inconsistencies might be encountered by page reload, window sizing and scrolling, selecting. With this property, IE offsets the element, but seems to forget to send a “redraw” to its layout child elements (as a layout element would have sent correctly in the signal chain of redraw events).

The overflow property triggers the element to have layout, see also the chapter "Where Layout Comes From":

As of IE7, overflow became a layout-trigger.

IE7 position:relative issue

I got it!

Just had to add position:relative to the parent elements of the shifted ones.

IE6 and 7 Absolute Positioning Bug

This sounds like the classic "HasLayout" bug, which is one of the banes in the life of every web developer that has to support older versions of IE.

HasLayout is an internal flag that IE hold against each element which determines whether to display it normally or with bizarre glitches. Actually that's not what it's really there for, but it does seem to have that effect.

The way to solve the problem is to force the elements in question to gain the HasLayout flag. Sadly, IE doesn't provide a direct way to do this; you have to apply a style which triggers it.

Typically, the style people choose to apply for this is

.myelelement {
    zoom:1;
}

The reasons for this are firstly that zoom is an IE-specific stylesheet attribute, and so this doesn't affect any other browsers, and secondly because zoom:1; is the default value, so you're not actually changing anything about the element. Despite this, it still triggers the element to gain the HasLayout flag, and thus should solve your problems.

Hope that helps.

Elements positioned relatively don't move when the DOM is updated (IE6 and IE7)

Yeah IE is a real pain when it comes to this. I found that I actually had to force it to redraw the DOM element inorder to get it to move. How I did this was to very quickly hide and show the parent object in your case it sounds like the parent to your row. This is not the most elegant solution, but it does the job.

In my case I used jQuery to get the job done.

var forceRedraw = function(obj) {
    /// <summary>Forces a redraw of passed objects.</summary>
    /// <param name="obj" type="jQuery" optional="false">The object for force the redraw on.</param>

    obj = $(obj);

    // force IE to redraw the obj
    if (jQuery.browser.msie) {
        obj.css("display", "none");
        obj.css("display", "block");
    }
};

CSS dropdown list showing behind the dropdown below, IE6, IE7, absolute positioning bug

There is a known issue with z-index in IE. It treats z-index differently for absolute positioned elements than it does for relative positioned elements. It's like you have two sets of z-indexes. You might be able to fix it by using wrappers with the same positioning, if you cannot get all your elements to use the same positioning.

EDIT 1:

http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/

EDIT 2:

z index bug

Z-Index IE bug fix?

Internet Explorer z-index bug?

EDIT 3:

jQuery Solutions:

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

http://webdeveloper2.com/2010/01/how-to-fix-the-ie-z-index-bug-with-jquery/

IE7 Z-Index issue - Context Menu

I have resolved this by changing the element ordering. I have removed the relative position element from containing both my button and menu, and made it only the parent of menu.

    <div class="control-action" style="float:right"> 
        <div class="control-action-menu">
            <ul style="display:none">
                <li class="action-remove">Remove</li>
                <li class="action-detail">Detail</li>
                <li class="action-assigned">Assign</li>
            </ul>
        </div>
        <button>Action</button> 
    </div> 

With this markup change the css has changed into the following:

.control-action
{
    text-align:right;
    width:100px;    
}

.control-action-menu
{
    position:relative;
    z-index:1;
}

.control-action ul
{
    position:absolute;
    z-index: 10000;
    list-style:none;
}

IE CSS Bug - How do I maintain a position:absolute when dynamic javascript content on the page changes

Its a bug in the rendering engine. I run into it all the time. One potential way to solve it is to hide and show the div whenever you change the content (that in turn changes the height):

var divCol = document.getElementById('column');
divCol.style.display = 'none';
divCol.style.display = 'block';

Hopefully this happens fast enough that it isn't noticeable :)

Relative layout issue with IE7

IE7 doesn't appear to be picking up the margin correctly.

Try setting a position: relative; declaration on your productItem class. Then instead of setting margin values for your .listing span.badge classes, try setting the following values:

top: 0;
left: 0;

You'll also need to do the shopping cart icon (your img.cart class). Again, you want this image to be absolutely positioned at the bottom right corner of each list item:

.listing ul li.productItem img.cart, .listing ul li.productItemLast img.cart {
    bottom: 5px;
    cursor: pointer;
    position: absolute;
    right: 5px;
}

You may want to adjust the bottom and right positions a bit.
That should take care of it.

---

Related Topics