Position: absolute; inside dynamic position: relative; element

Question

This is an IE7 bug:

I have a piece of a table that I push to another <tbody>. Ok, the problem is that inside the cells I have a position: relative; div and inside this div I have several other position:absolute; divs.

The thing is that they are being rendered as if the parent div wasn't position:relative, that means, completely at the top left corner of the screen. WHY?!?!

In ff,chrome it works fine, but at IE7 I get these annoying things. I've tried putting hasLayout everywhere but it just doesn't work.

Here is what I have:

<table>
    <thead></thead>
    <tbody id="mtbody">
    </tbody>
</table>

And this is what I receive and push to "mtbody" (sample):

<table id="testando">
<tr>
        <td hasLayout="true" class="uhr sl" colspan="7" style="border-bottom: dashed 1px #dddddd; background-color: #eeffee;">
            <div style="overflow: hidden;" class="holdU" hasLayout="true" betriebsId="83113" betriebsName="2nd Level">
                <div hasLayout="true" class="uhr filled0sl" style="width: 679px; left: 0px;">
                </div>


                    <div hasLayout="true" class="border" style="left: 96">
....

So class "holdU" is position:relative, and the classes "uhr" are position: absolute, and they are right now in my top left corner, sort of invisible.

How can I fix this?

UPDATE:

So basically this is the expected result: http://jsfiddle.net/kgT6E/ (from DanielB). But I'm NOT getting that. Imagine that this green square is now 100px away from the borders but instead of wrapping the red squares, they are staying at the top left corner, as the position: relative from the green square is not making any effect.

This is the code that I use to load the things to the table:

$.get(savedUrl, function(res) {
        var div = $("<div>").html(res);
// this is because I get other stuff together, but what I really want is the tbody content.
        $("#mtbody").html($(div.find("tbody").get(0)).html());
});

Before, I was loading everything to the tbody, $("#mtbody").load(savedUrl)

But the IE7 wasn't recognizing the TR's and TD's, so I had to wrap them in a table. Now I'm getting this odd positioning from the position:absolute divs.

UPDATE2: I have tried putting all the units (23 px ) but no luck so far. I think it's because I have to first wrap it in a div, and when I do so, the positions don't get updated.. really strange and nasty bug from IE.. =/

Answer 1

So after digging a bit I've found a very nasty "float: left" in div.uhr style. Basically that was breaking all the layout in IE7 making the div's with "position:absolute" appear out of the screen.

So people, take care about it! ;D