CODEWITHSUNDEEP
htmlcssinternet-explorer-8
Ale Petrucci
Ale Petrucci

Reputation: 11

ie8 bug: fixed position div, inside relative position div, inside relative position floated div ... doesnt render

This HTML doesn't render right in IE8. It works in Firefox, Opera, IE7, IE9 and IE10. (Of course, it doesn't work in IE6 either because it concerns a fixed-position element.)

Actually it does something different again in Chrome.

The narrowest test-case I could come up with is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            }
    </style>
</head>

<body>

<div style="background-color: red; position: relative; top: 50px; left: 50px; float: left;">
    <div style="background-color: blue; position: relative; top: 200px; left: 200px;">
        <div style="background-color: green; position: fixed; top: 0;">
        </div>
    </div>
</div>

</body>
</html>

In IE8, the inner-most div (the green one) somehow ignores the 50px left indent of the grandparent div (the red one), even the direct parent (the blue one) takes it into account. Weird bug!

It only happens when the divs are doubly nested in this way, and only when the grandparent is floated. If I remove the float, then it renders OK. (However, I need it to be floated, so that's not a workaround for me.)

Edit

I initially thought I had tested this in Chrome, but actually Chrome does something different altogether.

I don't know which browser is actually right.

Upvotes: 1

Views: 2315

Answers (1)

Reinier Kaper
Reinier Kaper

Reputation: 1129

There are no bugs going on here. The green div has 'position: fixed', this positions the element relative to the browser window, it doesn't position itself relative to the other elements.

My guess is you want the green div to be positioned relative to the blue div, right? Use 'position: absolute' on the green div then.

Upvotes: 0

Related Questions