Ghost In The Box

From CSS Discuss

Jump to: navigation, search

(See also Emulating Fixed Positioning)

(this is the contents of the page http://tagsoup.com/-dev/null-/css/fixed/. The site seems to be down, so I thought it wise to save the content from Google's cache. --- Tar Quin ( As of early Dec 2003 it is back up. I use its links to update this page - Jeff Hayes . Updated again May 2005) )

Contents

Fixing position:fixed for Windows Internet Explorer

Abstract

This is a hack to emulate the CSS 2 positioning scheme position:fixed for Windows Internet Explorer without active scripting (including dynamic properties, behaviors and whatnot).

First things first: Faking position:fixed for Windows Internet Explorer >= 5

Generic

The reason that the initial approach doesn't work in versions prior to 6 is lacking CSS support for the root element. There is, however, a trivial workaround: create a dummy element that serves as the document body and move the relevant properties one node down.

body
  {
  overflow: hidden;
  }
div.content
  {
  height: 100%;
  overflow: auto;
  }

Absolutely positioned elements outside of div.content will be fixed in respect to the viewport, absolutely positioned elements inside of div.content will behave normally. This works in version 5.0 and higher of IE on Windows and is the most stable solution available.

Note: this makes it mandatory to trigger quirks mode for IE6, e.g. by inserting a comment (accurately: comment declaration; see also: other prolog) before the doctype declaration. It could be avoided with some additional code overhead, with no advantage but a couple of general bonus bugs in return.

Complete cruft-free demos:

  1. fixed left bar for IE5(+)
  2. fixed top bar for IE5(+)
  3. fixed right bar for IE5(+)
  4. fixed bottom bar for IE5(+)
  5. fixed top and left bar for IE5(+)

Rationale

No user agent but Windows Internet Explorer must be exposed to any of the CSS rules relevant to the hack; I strongly recommend using conditional comments instead of exploiting parsing bugs to accomplish that.

2. Logging out don't work, or rather, it works partially. We remove the cookie from the browser but there's a bug in rakudo (which I still haven't submitted) that stops us from removing the session in a reasonable way.

Some older user agents that support position:fixed can't handle it very well (e.g., IE5/Mac). For maximum bugwards compatibility you should consider to @import the offending rule sets and wrap them in an @media screen block - the latter also serves an important semantic function, and the media type screen should be explicitly specified for the IE/win style sheet as well:

<style type="text/css">@import "all.css";</style>
<!--[if IE]>
<link
 href="ie_win.css"
 rel="stylesheet"
 type="text/css"
 media="screen">
<![endif]-->.

Using @import in a style element to basically link a style sheet is somewhat ugly but compact; blindly spawning http connections with multiple linked, imported and conditional style sheets is not a good idea, especially since user agents commonly request all files associated with a document, regardless of whether or not they actually support the corresponding MIME or media types.

At last some noise from the past: Faking position:fixed for Windows Internet Explorer 6

Generic

Simply moving the scroll mechanism from the root element to the document body

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

will cause absolutely positioned ascendants of the body element to be fixed in respect to the viewport. There are a couple of disadvantages involved:

  • in order to work, it requires IE6 to be in standards-compliant mode (know your oxymorons); authors haven't got the last word on that because client side ad blockers, security manglers and the likes can incidentally trigger quirks mode by local modification of the document source
  • It makes it impossible to use position: absolute in its intended way
  • In a complex setup the scrollbars could get partly hidden or completely inaccessible; this technique should only be applied for simple fixed boxes, preferably using overflow-y instead of overflow

On the upside,

  • It doesn't require redundant markup in the related document instance (you could, for example, not even have write permissions, or simply care about 'clean' markup).
  • It leaves the initial document focus for mouse wheel or keyboard scrolling intact.

Complete cruft-free demo:

  1. fixed box for IE6

[remainder of page omitted]

created 2005-092, modified 2005-093 / Eric Bednarz

Personal tools