Get IE6 quirks-mode position:absolute rendering in standards mode

Question

I have an absolutely-positioned navigation on my menu that is sent off to the left side.*

#menu {
    position: absolute;
    display:inline-block; /* I can hasLayout? */
    top: 0;
    left: 0;
    width: 265px;
    height: 100%;
    background: #ffc;
}

html>body #menu {
    height: auto;
    min-height: 100%;
}

It should look something like this:

+-------------------------------+
| N  |                          |
|    |  content content content |
| A  | content content content  |
|    |                          |
| V  |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
|    |                          |
+-------------------------------+

And in every browser but IE6, it does. In IE6 standards mode, it looks more like this:

+-------------------------------+
| N  |                          |
|    |  content content content |
| A  | content content content  |
|    |                          |
| V  |                          |
|    |                          |
|----+                          |
|                               |
|                               |
|                               |
|                               |
|                               |
|                               |
|                               |
|                               |
|                               |
+-------------------------------+

Here's where it gets tricky. In IE6 in quirks mode, it looks correct (so far as that box is concerned; everything else is garbage).

How do I get the correct behavior from IE6 without forcing quirks mode?

* Yes, I know I should be using floats for this, and not caring that it stretches the entire document. But it's apparently sacred that the background of the navbar reach the bottom of the page, and that it not be a tiled background-image.

Answer 1

Hm, perhaps onion skinning will be your friend here.

Disclaimer: This doesn't work for ALL backgrounds, but it works great for things that tessellate and I often resort to this for IE6 compatibility.

Don't use quirks mode as you'd prefer, but set your containing background to be the same color (or pattern). This will give the illusion that it is in fact stretching all the way to the bottom, where in reality it might not.

So for example, if I have a gray navigation bar, I'd render a 256px by 1px (in this case) solid gray png (or gif I suppose) and set that to be my body background with the repeat-y CSS parameter set for the body background:

e.g.

html {
   background: url('path/to/my256by1pxgif.gif') repeat-y;
}

Not fabulous, but guaranteed to work with things even older than IE6 :P

Here are some extra resources (for drop shadows, but same idea) http://www.alistapart.com/articles/onionskin/ http://www.ploughdeep.com/onionskin/360.html

Good luck!

Answer 2

First off, is it OK with you that (in your original code, for all browsers), if the content is long enough for the page to scroll, the menu will scroll up with the page and your background color won't extend to the bottom anymore? Position: absolute isn't the same as position: fixed.

If that's OK with you, and if you're OK with using a CSS hack or conditional comment just for IE6, then the problem is just that IE6 doesn't support your min-height, but the good news is that it treats height just like it's min-height. So just do this:

html, body { /* you probably already have this set for all browsers */
    margin: 0;
    padding: 0;
}

* html body { /* IE6 only */
    height: 100%;
}

I threw this onto a standards-mode test page and it appears to work just like the other browsers.

Now, if #menu is inside a relatively-positioned wrapper div instead of a direct child of the body, looks like other browsers will take #menu to the bottom of the document, but IE will not play along easily with CSS alone (it'll just set #menu to the height of the initial viewport). It'd be a pretty easy thing to correct with JavaScript, though.