Re: position:fixed and same-document references

On Thursday 10 March 2005 19:03, Anne van Kesteren wrote:
> I was experimenting a bit with 'position:fixed' on my personal site
> and some other things and I re-discovered an "annoying bug."
>
> Lets say you have a fixed header to simulate frames or so. Since
> every standards advocate out there is saying CSS can replace frames I
> guess people might try it out.
>
>   #header{
>    position:fixed
>    width:100%;
>    height:5em;
>   }
>
> Now lets say you have a link to the comments on a post. That link is
> a same-document reference since the comments are on the same page as
> the post. The link is |#comments|.
>
> Obviously, it links to something that is hidden under the header if
> the object it links to is smaller than 5em in height
>
> A solution for this "problem" would be very helpful. I'm not sure if
> the CSS WG should deal with it though. If not, please let me know and
> I'll forward it to some other WG.

If you position something fixed to the top, maybe other content that 
risks scrolling underneath it should be contained inside a box that is 
itself fixed as well.

>
> ...
>
> I have discussed the problem with some other people as well and a
> solution is probably not easy, if not impossible. Perhaps
> 'position:fixed' should not be recommended for replacing frames at
> all.
>
> (Although I guess, when @viewport arrives, you could have a special
> attribute that says how much space should be reserved at the top.)

The Device Independent working group has offered to help the CSS working 
group with designing a system for "high-level layout" a.k.a. "grid 
layout" that can replace absolute & fixed positioning (and float hacks 
and HTML tables) in most cases, and that would be simpler to use, 
resizes better (because all positions are relative to the grid) and, 
especially, more modular, in the sense that it is easy to replace one 
grid with another without touching the rest of the style. You can then, 
for example, use Media Queries to import a 3-column layout for a wide 
screen, or a 1-column layout for a narrow screen.

It should also be more modular in the sense that you can draw the layout 
graphically (with a little, interactive tool) and have it transformed 
into CSS, and vice versa: from CSS into a diagram, without requiring 
the tool to understand any other properties than the one or two that 
define the layout. Inferring a layout from absolute positioning and 
floats as they are currently is almost impossible.

The system is unlikely to use @viewport, though, since @viewport would 
allow only one layout per page, whereas our layouts have to be 
recursive (like nested tables).

But you can put a layout on the root element and use 'height: 100%' to 
get the same effect.

(My latest idea for a syntax is to basically draw the grid in ASCII 
graphics:

    display: "xxxxx"
             ":::::"
             "x:xxx"

represents a block divided into three parts: the first is full-width and 
the third is three times as wide as the second. By addding more values 
you can force columns or rows to a specific size. 'position: 3 1' then 
puts an element in the 1st slot on the 3rd row. This is not the only 
idea that circulates, however. There is also a draft from 1996[1], an 
idea based on 'move-to' properties to rearrange elements, and there is 
an idea to just state the number of rows & columns in the grid and then 
specify an element's position and size in grid coordinates. And, 
finally, there is an idea to "pull" rather than "push" content into a 
grid: element's themselves don't have position properties, but each 
grid cell has a selector that says what content goes there.)

[1] http://www.w3.org/TR/NOTE-layout



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Tuesday, 15 March 2005 13:16:57 UTC