13.07.2015 Views

Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Chapter 11: PositioningEmulating position: fixed; with bottom: 0; is similar to the process required <strong>for</strong> top: 0;, and it isthere<strong>for</strong>e subject to the same limitations. Again, to create this effect in IE 6 and IE 7 in quirks mode, andIE 5.5, just replace documentElement with document.body. For emulating the bottom property with avalue other than 0, take the value, add 2 to it, and replace where 2 is being subtracted with your newvalue. For example, to emulate bottom: 5px;, you’d do the following:top: expression((documentElement.scrollTop + documentElement.clientHeight - this.clientHeight) - 7);I use the value 7 in the preceding example, because at least 2 pixels must always be subtracted, so, 2 +5 = 7. In the next section, I explore how you create the illusion of fixed positioning to workaround thelack of support <strong>for</strong> fixed positioning in IE 6.Try It OutA Review of Fixed PositioningExample 11-3. To recap the concept of fixed positioning, follow these steps.1. Enter the following XHTML document in your text editor:Fixed PositioningThe concept of fixed positioning is pretty straight<strong>for</strong>ward.Elements with a fixed position stay in place, even when a documentis scrolled. Elements with a fixed position are always positionedrelative to the browser’s viewport, no matter where they appearin a document’s structure.IE 6 and IE 7 in quirks mode do not support fixed positioning, eventhough IE 7 in standards mode does support fixed positioning. Sometricks are employed to make the document work in IE 6, in standardsmode.Even though fixed positioning technically allows an element to beplaced anywhere in the document’s structure, the IE hacks that Ipresent here require that fixed position elements always be immediatechildren of the &lt;body&gt; element.399

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!