Full Page No Scrollbar In IE

dwight.stegall · February 24th, 2005, 05:13 PM

In your book it said the following code would not work in Internet Explorer 6.0

<p style="margin:10px; padding:10px; background-color:silver; position:absolute; top:0; left:0; bottom:0; right:0;">blah blah</p>

This will help.

<p style="margin:10px; padding:10px; background-color:silver; position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:96%;">blah blah</p>

richard.york · February 24th, 2005, 05:27 PM

Sure, if you're working in quirks mode. IE in standards mode uses a completly different box model. You should see that mentioned in the box model diagram in Chapter 10 (admitedly I didn't go into nearly enough detail on that topic). In IE standards mode, width: 100% + 20px margin + 20px padding + 2px border = greater than the width of the window and height: 96% doesn't do anything.

In quirks mode you don't even have to bother with absolute positioning or the four offset properties. IE doesn't stretch content in either rendering mode with all four offset properties present.

The entire book is focused on composing markup in standards mode, since IE6 is more consistent with the other browsers when in standards mode, which facilitates multi-platform development. I didn't get to elaborate much on the differences in box model rendering in IE quirks vs. IE standards mode (eventhough I wanted to) because I was on a tight deadline.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

richard.york · February 24th, 2005, 05:32 PM

Here's a little code to backup my claim.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html>
        <head>
            <title></title>
            <style type='text/css'>
                p {
                    padding: 10px;
                    margin: 10px;
                    border: 1px solid black;
                    background: lightgrey;
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 96%;
                }
            </style>
        </head>
        <body>
            <p>
                It is not a bad idea to get in the habit of writing down one's thoughts. It
                saves one having to bother anyone else with them.
                    - Isabel Colegate
            </p>
        </body>
    </html>

You see with the XHTML strict DOCTYPE present, standards mode is invoked and a scrollbar appears on the bottom and height is not affected by the presence of the height: 96% declaration. When it is removed you'll see what you saw in your example.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design