Absolute positioning on Firefox vs. Chrome

Question

I am having a problem creating a menu using jQuery that I have boiled down to the issue below. This sample code renders differently in Firefox and Chrome:

HTML:

<table id="topTable">
    <tr>
        <td>
            <div id="outer">
                OuterDiv
                <div id="inner">
                    InnerDiv
                </div>
            </div>
        </td>
    </tr>
</table>

CSS:

#topTable {
    position: absolute;
    top: 50px;
}

#outer {
    background-color: Red;
}

#inner {
    background-color: Blue;
    position: absolute;
    top: 0px;
    left: 100px;
}

In Firefox, the "outer" element appears 50px down the page, but the "inner" element is at the very top of the page. In Chrome, the "inner" div is slightly above 50px, but nowhere near the top of the page. Can someone explain why I'm seeing this different behavior? I noticed that adding "position: absolute" to the "outer" element causes the sample to render the same on each browser, but that messes up the styling on my actual menu code. If I could understand what's going on here, I can figure out what direction I need to take to fix my real code. Any ideas?

Solution 1

add position:relative; for #outer

#outer {
    background-color: Red;
    position:relative;
}

see : http://jsfiddle.net/5XWcD/1/, I tested in FF6.02 and chrome 11.0

Solution 2

Set position relative in parent node

.classParent{
    position: relative;
}

And adjust top and left once again