(h1)   a fixed footer...

(h2)   a fixed header...

fixed
fixed

"position: fixed" for Internet Explorer...

Of course I didn't come up with this myself. I rarely do.
I borrowed the main part from this page, and worked on it until I got the buggy bits ironed out.
So before I go any further; my thanks to annevankesteren.nl/ for the code I'm building on.

Some additions to my toolbox comes from Alex Robinson's Frames without frames, where a good overview is to be found.

All good browsers do a good job when presented with "position: fixed" defined for an element. But, Internet Explorer for windows can hardly be called "good", so no "position: fixed" will work in IE6. The whole idea is to make it work anyway, and it does — thanks to IE-expressions.

the borrowed and reworked code...

- The header was there already, so I just had to re-style and test it a bit.

- The footer was there also, but that one needed a small adjustment to allow for borders. 2px border on top ment that 2px had to be subtracted from the position, or else IE gave me an endless scroll. 2px border on bottom also needed -2px on position, just to make it visible. All in all: -4px subtracted from the true bottom-position.

- The horisontally and vertically centered part is my own. It is really just the calculated footer position divided by 2, so not much work went into that one either. No need to complicate things.

To make it all look like "something", I used "z-index" to layer the center part as a background, and put the header and footer on top. A suitable padding on top and bottom of <body>, finishes it off.

After that I added 2 floats with different positioning-methods. They might come handy some day. Everything is styled in the page-head, ready to be played with some more.

is this any good..?

This example isn't ment to be very nice and well designed and all that. I'm just testing a solution to one of the many problems we have when we are including Internet Explorer in our design plans.

The term "standard compliant" that Microsoft claims for IE6, doesn't count for much since the standards are so full of exceptions to the rules — only for Internet Explorer. Guess that's why we have to use non-valid code and definitions to make it look like Internet Explorer can do anything useful.

The good browsers: Opera, Mozilla Firefox, Safari and others, can do it all when given standard code and definitions. So that's what they get on this page too. Any non-valid code will have to be hidden from the good browsers and the W3C validator, so be prepared to create a garbage-can for Internet Explorer if any of this is to be used for real.

want some more..?

I think anyone who understands some javascript can get whatever they like to show up on a screen. Yes, IE-expressions are built on javascript, so that's a good place to begin, I guess. I'm no good at scripting, so I'll leave the rest to those who are...

My tools of choice for web design are (x)html and CSS, so that's what I build on here. I don't see that as a limitation for the time being (even though I'm cheating a little).

This tiny page may look like a sort of "frame" on screens, and that might be something for me to build on on a real page. Using "fixed foreground" as "fixed background" may also come handy— with some real background, of course.

One weak point is the javascript-connection these IE-expressions have, as they will fail in Internet Explorer if javascript is turned off. Not a big problem IMO.

Another (possible) weak point is uppdate-speed when the page is scrolled. That's CPU-speed related, so no problem at my end.

The only reason why I used <hn> as positioned elements (and in the wrong order), is to show that any block-element can be used. My source-code order makes more sense than the final presentation (me thinks).

more IE-expressions...

Once I create a test page, I may as well go further in my control of how it behaves in Internet Explorer. A couple of IE-expressions to simulate more of what the good browsers do.

- Line-width is limited to 600px by using a max-width simulation.

- Page-width is also kept above 600px by using a min-width simulation.

This is pretty simple stuff, ready to go into Internet Explorer's garbage-can. This page is by definition: non-valid (but the validator can't see that), and that's it on the subject.

Georg; sign   Hageland: 18.jan.2005
rev: 19.jan.2005
 


This is probably the right place for a fixed menu, going down the right side of the page.

Its actual height must be limited, as it may conflict with the footer on short windows.
I've used "scroll: auto" on this test page, but that's a very limited solution.



This text is in a float from within an absolute positioned container with no area, and the column is a fake...

CSS sure is fun!

Since I am looking for alternative ways to use the space in these side-columns, some repeated text, that will scroll with the main area, is placed here.

Since I am looking for alternative ways to use the space in these side-columns, some repeated text, that will scroll with the main area, is placed here.

Since I am looking for alternative ways to use the space in these side-columns, some repeated text, that will scroll with the main area, is placed here.

Since I am looking for alternative ways to use the space in these side-columns, some repeated text, that will scroll with the main area, is placed here.