Question

This one has me stumped – I have an element on my page with an absolute position, inside of a container with a relative position. In all browsers except IE7, it appears in the correct spot with no issues at all.

In IE7, the element doesn’t appear until I add or edit any of its CSS properties in the Attributes tab of the Developer Toolbar (even properties that have nothing to do with its visibility or position, like color). Once I do so, it then appears correctly – and even remains visible if I delete the property that I just added (or undo the modification)!

This must be an IE7-specific display bug, but I can’t figure out a way around it – I’ve thrown float, zoom, etc. at it to no avail.

Answer 1

I fixed this by moving the disappearing element one level deeper, into another child element. Since the child element is floated, but does not have a position, the disappearing element is still positioned relative to the parent element, which is what I want – but for some reason this also causes it to be visible in IE7, like it’s supposed to be.

This is what I had that caused the element to disappear (not the real IDs):

<div id="parent" style="position: relative;">
  <div id="disappear" style="position: absolute; left: -8px; top: -17px;>This element disappears</div>
</div>

This is what makes it appear:

<div id="parent" style="position: relative;">
  <div id="child" style="float: left; width: 340px;">
    <div id="disappear" style="position: absolute; left: -8px; top: -17px;">Now this element appears</div>
  </div>
</div>

Floating #parent and giving it a width (the same two properties that #child has) didn’t work, though – I have to use a separate child element. Totally bizarre, but figured I’d post this in case anyone else runs into the same problem!