This is a Microsoft's Internet Explorer problem, and the fix is hellacious. The issue is that there is a problem with how Internet Explorer interprets the CSS "position" property. The possible values for this property are static, relative, absolute, and fixed. The difference between "position: fixed" and "position: absolute" is that absolute positons the content when the page is first painted, but then the entire content of the screen scrolls; "position: fixed" remains in a constant positon in the viewport. When placeing text in a non-moving position in the browser window (within, that is, the "viewport"), that is, text that reamains in place on the screen even if the window is scrolled, "position: fixed" is used.
Positioning fixed content should be as simple as the following code:
<div style="position:fixed;top:5pt;left:5pt">This should not scroll</div>
|
With a bit of extra effor accomodiation may be made for printed media (so that the fixed content does not appear on every printed page) and spoken media (screen readers, which may interleave columns):
<style type="text/css">
@media screen {
div.side_index {
position: fixed ;
top:5pt ;
left: 5pt }
}
@media print {
div.side_index {
position: absolute ;
top:5pt ;
left: 5pt }
}
@media aural {
div.side_index {
speak : none ;
display: none }
}
</style>
|
The problem is that Internet Explorer does not get this, and allows "position: fixed" to scroll.
In order to fix this problem it is necessary to generate three objects, the body, the non-scrolling area, and the scrolling area. The body contains the other two objects; thus, the code goes like this:
<style type="text/css">
body {
margin: 0 ;
padding: 0 0 0 0.5em }
div.side_index {
height: 100% ;
margin: 3em 0 0 0 }
div.content {
padding: 0 0.4em 0 0 }
div.overlay {
position : relative }
@media screen {
body>div.side_index {
position: fixed }
}
@media print {
div.side_index {
position: absolute }
}
@media aural {
div.side_index {
speak : none ;
display: none }
}
</style>
|
Allowance needs to be made for scroll bar in the scrolling area (the 0.4em right value for padding in the content object); also, accomodations needs to be made for other, non-IE browsers: in the above example, that includes the "body>div..." specification, which gets picked-up in some non-IE browsers, and the "div.overlay" object, which is necessary in some browsers to place content on top of the non-scrolling object. This is all very trial-and-error, and needs to be extensively tested (the IE fix is often easier to develop than the counter-fixes for non-IE platforms). Borders, font and background colors, font weights and styles, and other content-specific formatting would be included in the associated div style attributes: e.g.,
div.side_index {
height: 100% ;
margin: 3em 0 0 0
border-top: solid ;
color: #993300 ;
font-weight: bold }
|
.
.
.
</head><body>
<div class="side_index"> <!-- non-scrolling page content -->
<span style="font-size:14pt">·</span><span style="font-style:italic"><a href="Design/index.html">Design</a></span>
<span style="font-size:14pt">·</span><span style="font-style:italic"><a href="TechNotes/index.html">Technical<</span>
<span style="font-size:14pt">·</span><span style="font-style:italic"><a href="Samples/index.html">Samples</a></span>
<span style="font-size:14pt">·</span><span style="font-style:italic"><a href="Utilities/index.html">Utilities</a></span>
</div>
<div class="content"> <!-- begin general page content -->
blah
blah
blah
</div></body></html>
|
While this basic fix works well for Internet Explorer, the objects do not always layer as expected with other user agents. For example, the non-scroll object may overlay the scrolling object and prevent mouseovers (including links) from responding properly: thus, the "overlay" object may be needed to insure that the desired conent is actually available in the top-most layer. Thus, the page looks something like this:
It should be remembered that you do what you can do -- something like this is not foolproof, and you get it as good as you can get it. But the object of the page -- with respect to all possible combinations of platforms and user agents -- is total usability of the information, not total consistency of the presentation. And sometimes somebody is just going to find a way to break it: for example, on the home page, if the window is very wide and very short (say about 955*510, about 1.85:1, as opposed to the standard ratio of 1.33:1) the side menu may get covered by the bottom buttons (but the screen dimension sniffer is pretty good at fixing that), and in Netscape 6 the non-scroll object still kills the links that it covers at the bottom of the content object, even with the overlay object.
|
Document: http://
Revised: |
