Shifting an internal anchor in viewport

Greetings,

This is my first foray into CSS and indeed my first website in general.
My goal is to use a liquid(ish) design, no javascript and no tables for
layout positioning. Rather foolishly I embarked on a "frame emulation"
type of layout for no real reason other than to see if it could be
done. Predictably I have come across many obstacles along the way, and
predictably most of them are found in IE.

(I have emulated position: fixed; in IE as outlined in;
http://tagsoup.com/-dev/null-/css/fixed/ )

I have a fixed DIV across the top of every page that has caused some
problems with internal anchors as they will focus at the top of the
viewport underneath the fixed DIV. I came up with an ugly solution that
requires a little extra markup HTML, but I can live with that.

HTML:
<ol>
<li><a href="#h2.intro">Introduction</a></li>
<li><a href="#h2.whats_new">What's New?</a></li>
</ol>

[~]

<div id="h2.intro" class="anchor"><div>
<h2>Introduction</h2></div></div>

CSS:
div.anchor {
position: relative;
top: -9em;
}

div.anchor div {
position: relative;
top: 9em;
}

URL:
http://www.boozers.net.au/

The fixed DIV at the top of the page is 9em high. This works in Firefox
1.5 and Opera 8.5, however it doesn't play nice in IE6.

Does anybody know an alternate method that will work in IE6?


(2)
I also have another quick query regarding forcing the width of a
floated DIV. Basically I have;

HTML:
<div id="content_wrapper">
<div id="content">
Some Content
</div>
<div id="navtop">
Some Content
</div>
<div id="footer">
Some Content
</div>
</div>

CSS:
#content_wrapper {
float: left;
width: 100%;
}

#content {
float: left;
margin: 0 10em 0 0;
}

#navtop {
float: left;
margin: 0 0 6em -10em;
width: 10em;
}

#footer {
clear: both;
width: 100%;
}

example URL:
http://www.boozers.net.au/library/

Is there any way to force the content DIV to use all the available
width?


Sorry for the long post. I would also appreciate any and all
suggestions regarding the site (excluding content which is non-
existent).

TIA

--
Rob McKenna,
Rain God.

Rob McKenna <231 (AT) rain (DOT) god> wrote:

[Shifting an internal anchor in viewport]

The fixed DIV at the top of the page is 9em high. This works in Firefox
1.5 and Opera 8.5, however it doesn't play nice in IE6.

Does anybody know an alternate method that will work in IE6?

I dislike position:fixed and particularly the methods to emulate it in
IE, but maybe this method can be used for the IE emulation also:

http://www.spartanicus.utvinternet.ie/link_offsets.htm

--
Spartanicus

Spartanicus wrote:

Rob McKenna <231 (AT) rain (DOT) god> wrote:

[Shifting an internal anchor in viewport]

The fixed DIV at the top of the page is 9em high. This works in
Firefox 1.5 and Opera 8.5, however it doesn't play nice in IE6.

Does anybody know an alternate method that will work in IE6?

I dislike position:fixed and particularly the methods to emulate it
in IE, but maybe this method can be used for the IE emulation also:

http://www.spartanicus.utvinternet.ie/link_offsets.htm

Thanks for the reply Spartanicus. I had read that method on your site
before, however when I apply it to a heading that has a size greater than
100% it applies too large a padding. Additionally IE seems to ignore an
empty <a> tag.

<h2><a id="h2.intro" class="anchor"></a>Introduction</h2>

a.anchor {
padding-top: 9em;
}

http://www.boozers.net.au/

--
Rob McKenna,
Rain God.