ansaurus

Question

Answer 1

A:

If you're having problems specifically with IE6 - consider using a resets script. It will make your life much, much easier. There are lots of different flavours of reset script out there, so do a bit of research and to find one that you like. Personally, I find that yahoo produce one that's fit for purpose.

The thinking behind using a resets script is:

Each browser applies a set of default styles and properties, before any user style sheet is even loaded.
A lot of the differences between the way a page renders are due to the inconsistencies between these defaults.
If we could find a way to 'flatten the ground' before we begin building, life would be easier

A resets script performs that flattening - and IE6 can be dealt with in a much more logical way.

The obligatory link ;)

http://developer.yahoo.com/yui/reset/

Solution

Bearing in mind the use of this resets script, I offer you the following solution.

As you're probably aware, IE6 doesn't support position:fixed.

To solve the problem you can make use of the following snippet:

<style>

html, body {
    height: 100%;
    overflow: auto;
}

div#fixed-bottom {
    position: fixed;
    z-index: 2;
    bottom: 0;
    height: 20px;
    width: 100%;
    background-color: #eaeaea;
    margin-top: -20px;
}

div#content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

* html div#fixed-bottom {
    position: absolute;
}

</style>

Which should be applied to a document containing the following elements within it's <body></body>:

    <div id="fixed-bottom">
        <p>
            I'm at the bottom
        </p>
    </div>
    <div id="content">
        <p>
            Your content here.....
        </p>
    </div>

This should work because:

IE6 treats height in the same way that most browsers treat max-height. The overflow auto will allow content to flow (with scrollbars) if the content carries on past the height of the browser viewport.
The '*' hack is used for simplity - it makes sure that IE6 applies 'position:absolute;' rather than 'position:fixed'. You should use conditional comments to provide specific CSS for IE6.
Note that this solution will only work when IE6 is set to use 'strict mode'. This can be set explicitly by choosing an appropriate doctype; for example:
```
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
```

codeinthehole 2009-11-17 02:52:05

What do you mean by "standars mode"?

Mask 2009-11-17 10:02:39

Apologies, it was late when I wrote this. IE6 can operate in two different modes .. one is called quirks mode and the other is known as strict mode. http://www.quirksmode.org/css/quirksmode.html

codeinthehole 2009-11-17 11:34:12

I removed the part "div#content" and it won't work.Why?

Mask 2009-11-18 01:42:24

@ codeinthehole,I'm grateful for your help.

Mask 2009-11-18 02:17:07

@mask, I don't think down-voting, and deselected my answer as accepted means you're grateful. As others have said, the way you behave on stack overflow leaves a lot of be desired.

codeinthehole 2009-11-19 12:41:59

btw - if anyone's looking at this answer and is wondering if it works, it does.

codeinthehole 2009-11-21 22:53:37

ansaurus

tags:

views:

answers:

How to implement fixed bottom in IE6?

related questions