The following test case is a simplified version of a layout I am  
working on. There are four child elements of body, the first (blue) is  
absolutely positioned at the bottom of the viewport, the last (green)  
is absolutely positioned at the top of the viewport, the second  
(yellow) is a hack (a floated element with a negative margin-bottom)  
to vertically center the third (red).

In IE 6 the first element which should be blue and at the bottom of  
the viewport does not seem to be rendered at all. At first I thought  
it was being rendered off screen, but a simple javascript function  
(which I have included but commented out) suggests it isn't be drawn  
at all.

IE 7 is even stranger. On first loading the page the element in  
question is drawn, but then isn't if you refresh the page. I could  
reproduce that behaviour consistently.

The page displays as intended in Firefox, Safari, Opera, Chrome and IE8.

If you set the float property to "none" for #spacer the problem goes  
away, but then the vertical centering does not behave as I would want.

Any suggestions for what the underlying bug here is? I'm not sure I've  
seen this one before.

Here's the file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html
        xmlns="http://www.w3.org/1999/xhtml";
        xml:lang="en"
        lang="en">
        <head>
                <title>Test</title>
                <meta
                        http-equiv="Content-Type"
                        content="text/html; charset=utf-8"/>
                <meta
                        http-equiv="Content-Style-Type"
                        content="text/css"/>
                <style type="text/css" media="screen">
                        html,
                        body {
                                height: 100%;
                                margin: 0;
                                padding: 0;
                        }

                        body {
                                font-family: Arial, Helvetica, sans-serif;
                                font-size: 12px;
                                color: #fff;
                                background-color: #000;
                        }

                        h1 {
                                bottom: 0;
                                height: 48px;
                                background-color: blue;
                        }

                        h1,
                        #footer {
                                position: absolute;
                                left: 0;
                                z-index: 2000;
                                margin: 0;
                                padding: 14px 0;
                                width: 100%;
                                text-align: center;
                        }

                        #spacer {
                                display: block;
                                float: left;
                                margin: 0;
                                border: none;
                                padding: 0;
                                width: 100%;
                                height: 50%;
                                margin-bottom: -305px;
                                background-color: yellow;
                        }

                        #content {
                                clear: both;
                                position: relative;
                                z-index: 1000;
                                margin: 0 auto;
                                width: 960px;
                                height: 570px;
                                background-color: red;
                        }

                        #footer {
                                top: 0;
                                height: 12px;
                                font-size: 10px;
                                list-style-type: none;
                                background-color: green;
                        }
                </style>
                <script type="text/javascript">
                        // Uncomment the following for some basic diagnostic 
info
                        // window.onload = function() {
                        //      var logo, logoX, logoY;
                        //      logo = document.getElementById('logo');
                        //      function getX(e) {
                        //              var x = 0;
                        //              while (e) {
                        //                      x += e.offsetLeft;
                        //                      e = e.offsetParent;
                        //              }
                        //              return x;
                        //      }
                        //      function getY(e) {
                        //              var y = 0;
                        //              while (e) {
                        //                      y += e.offsetTop;
                        //                      e = e.offsetParent;
                        //              }
                        //              return y;
                        //      }
                        //      logoX = getX(logo);
                        //      logoY = getY(logo);
                        //      alert('h1#logo is at: x = ' + logoX + ', y = ' 
+ logoY);
                        // }
                </script>
        </head>
        <body>
                <h1 id="logo">
                        <!-- A logo would go here normally but isn't necessary 
for the test  
case -->
                </h1>
                <div id="spacer"><!-- Hack for vertical centering --></div>
                <div id="content">
                        Foo
                </div>
                <ul id= "footer">
                        <!-- A list of links goes here but isn't necessary for 
the test  
case -->
                </ul>
        </body>
</html>

  
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to