This page has an excelent example of a fullscreen scrollable division, smack in the middle of your viewport. A framelike box in a page, that works well in Internet Explorer. It simulates or emulates frames in that it fixes the position of the navigation bar, the navbar. The menu is static in the viewport, fixed on your screen.

It works and the page is written in valid HTML4.01 Strict combined with valid CSS2.1. No tricks, just good, proper markup and some smart styles in a style sheet especially for Internet Explorer.

Written as a test page, just for fun. Enjoy!

Creating a fixed Navbar for Internet Explorer

Using valid HTML4.01Strict and CSS2.1

Come again? Is that possible? A fixed navigation bar in Internet Explorer, holding the menu to a site, using strict markup and some styles? All valid? No quirksmode and no frames? What's the catch?

Of course it is possible. And it isn't even that hard to create. There are two different things you have to create, two 'optical illusions' if you like:

First of all, the illusion of a framed site. You do that by creating a box (simply use the element <body>; it is already there) of which you set the value for the overflow property to overflow:auto;. You put that box inside another box (use the <html> element; agian: it is there already) for which you set the value for the overflow property to overflow:hidden;, after setting height:100%;. Finally you create a margin around the first box, like body { margin:2em; }, whith which it looks like there is an inline frame inside a page.
Now, you create the 'fixed' positioned menu. You do that by using the same space that you intend the navbar to go into, for a few layers:
- The first is a box that (a) has the exact dimensions you want the area of your navbar to have, and that you (b) float into position. This float (just an empty division will do) will keep your content from disappearing underneath your absolute positioned navbar when the page is opened.
- The floated division will disappear with scrolling down, letting the content touch the area of the actual menu. That is not nice. So we'll prevent that from happening by creating a new area. This second area is again a box that has the dimensions of the freeed area (what the floated box was for) for the navbar, but this time you position the thing absolute. This second box creates a fixed background area for the actual navbar. This background area keeps the content of the page and the border of the navbar optically separated, which is nice. Not necessary, but it looks better than if you leave this layer out.
- Finally, you create the navigational menu itself. It is a simple unordered list with the textual hyperlinks in the list items. The list you then position in place using absolute positioning. This is done regularly on the web, so many references can be found.

There. That's all there is to it.

Wanna know how this is done?

Wanna know the details? This page is an example of the described technique. It could be a bit buggy still, since these examples and testpages are just to provide you with some inspiration and technical background. For a full solution, you will have to pay me :-) .

Still, as an example it has the key to find out for yourself which technique is used how. Just study the source code. The style sheet is embedded in the <head> element of this page. I've added some valueable pointers in that style sheet. You should be fine, studying it.

Now, what's the catch?

Don't expect this page to look brilliant in other browsers than Internet Explorer. Contrary to what I normally do, these styles are explicitly written for that crappy ol' thing. So without doubt this page is likely to fail in a normal browser. Functioning in a normal browser is not the purpose of this page. The purpose is to create a framelike look for a page especially for IE.

I succeeded, I guess. Just create yourself a solid page, working in all browsers and create a special stylesheet just for IE. Use a conditional reference, so this special sheet is called if someone with IE as a browser visits your page. Such a conditional reference would look something like:

<head>
  <!--[if IE]>
    <link rel="stylesheet" type="text/css"
     media="screen, projection" href="fixIE.css">
  <![endif]-->
</head>

Note

This page is part of PretLetters site. If you like it, you could visit the main site or check out more test pages and examples. Of the test pages many are in English. The examples and the rest of the site is in Dutch.

Have fun!

If you liked what you saw and I helped you out a bit with something, you could consider contributing something small so I can continu to put efford in this site. With that you help me to help you and others. Please visit my page (in Dutch) on bijdragen, contributions and donations. Thank you,