[lug] OT: css web layout, fixed nav areas

Thu Apr 3 17:00:01 MST 2003

I'm trying to do without frames, yet have a fixed nav area with buttons 
for intra-document navigation, e.g., a button for "top", another for 
"index", another for "bottom", so on. The left margin of the main text 
is in a div (not the entire body, but everything other than nav buttons) 
that offsets the left margin enough to leave room for the buttons. This 
part works in every browser I tried. Forcing the buttons in the left 
margin to exist within the left margin works on all browsers. Forcing 
the nav buttons to always be vertically within the visible window during 
vertical scroll fails on every browser except Mozilla. If I can get the 
nav buttons to be nailed down on the visible screen during vertically 
scrolling (on non-Mozilla), it'll work.

All of this is being done in xhtml strict and css. A number of 
experiments are successful with Mozilla 1.2, but a failure with every 
other browser made, including IE 6, using something like this (and I 
tried many variations of positioning, float, and clear):
div.offset {
	margin-left: 140px;
	margin-right: 5pt;
	float: right;
	clear: none;
}

div.fixed-nav {
	position: fixed;
	left: 5px;
	top: 5px;
	margin-left: 5px;
	margin-top: 5px;
	border-style: solid;
	padding-left: 2px;
	padding-right: 2px;
	width: 115px;
	clear: none;
}
...
<body>
<div class="fixed-nav">
...button stuff...
</div>
<div class="offset">
...main content...
</div>
</body>

All of the docs validate as xhtml strict, and css also validates. What 
am I missing that causes IE 6 and other browsers to not position the nav 
buttons at 5 pixels from the top of the visible window at all times? I 
already *know* I am doing something wrong, like using positioning in a 
way that is not intended, but I'd like to know what that is so I can 
correct it.

D. Stimits, stimits AT attbi DOT com

PS: If anyone knows of a web page that has a successful fixed nav bar in 
a margin, that never moves from the visible screen during scrolling, and 
in which it works in IE 6 and not just Mozilla, this too would help.