Question

I have the following HTML (excerpt from larger code-base)

<div class="diary-event ui-corner-all" title="[title]">
    <span id="delete"></span>
    <div class="diary-event-title ui-corner-all">[title]</div>
    <div class="diary-event-body ui-corner-all">
        <p class="hyphenate">[body]</p>
    </div>
</div>

(Where [title] and [body] are dynamically generated strings)

And the Styling for this is as follows:

.ui-corner-all
{
    -moz-border-radius:4px 4px 4px 4px;
}
.diary-event
{
    display:block;
    height:100%;
    position:relative !important;
    vertical-align:top;
    width:100%;
    word-wrap:break-word;
}
table *
{
    margin:0;
    padding:0;
}

#diary-grid
{
    border-collapse:collapse;
}
body
{
    font-family:Arial;
}

Now in Firefox, Chrome, and most other browsers, the relative positioning of this div means it scrolls with the rest of the page, no problems, however for some reason in IE 6 and 7 it acts as if the positioning is static (IE 8 works fine).

At no point in /any/ of the CSS files is the position referred to as static and I was wondering if anyone has come across this problem before, and if so, how I may fix it.

I have found that the problem is where jQuery injects the positioning directly into the ‘style’ section of the main div:

start: function(event, ui)
{
    $(diary_event).attr('style','position: relative'); // <----
    diary_event = $(this);
    diary_event_parent = $(this).parent();
}

however if I remove this it breaks the ability to re-drag a dropped element accurately in all other browsers apart from IE.

In other words, I have found where the problem resides, but not how to fix it >_<

Answer 1

It’s because of a bug in ie6&7. You have just to add position:relative to the “body” element (not your “body” placeholder). http://friendlybit.com/css/ie6-resize-bug/

Hope it helps!