CODEWITHSUNDEEP
htmlgoogle-chromefirefox
gfrizzle
gfrizzle

Reputation: 12609

Absolute positioning on Firefox vs. Chrome

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?

Upvotes: 7

Views: 14495

Answers (2)

Rogelio Garcia
Rogelio Garcia

Reputation: 11

Set position relative in parent node

.classParent{
    position: relative;
}

And adjust top and left once again

Upvotes: 1

Giberno
Giberno

Reputation: 1333

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

Upvotes: 8

Related Questions