Forum Moderators: not2easy
I am building a site at the moment that has a fixed header that does not scroll with the rest of the page. In a long page I would like to use a couple of page jumps, but the natural characterstic of the jump is to place the link at the top of the browsers screen, which hides the content under the header.
To move the jump down slightly so it will show the content I developed a little offset class to add into the jump link, this works perfectly in FF3.0 and not at all in IE7 (anyone surprised?)
CSS:
#staffwrap{ width:605px;
padding:2px;
margin-left:42px;
overflow:auto;}
#staffmini {width:104px;
height:180px;
border:1px solid #336699;
padding:2px;
font-size: 10px;
line-height:12px;
position:relative;
margin:5px;
float:left;
text-align:center;
}
#staffname {
font-size:10px;
font-weight:bold;
text-decoration:underline;}
#staffbio{
width:100%;
border-bottom:solid 2px #336699;
margin-top:10px;
font-size:12px;}
#staffhead{
font-size:13px;
font-weight:bold;}
.offset{
position: relative;
top:-150px;}
#staffpic {
width:104px;
height:129px;
padding:2px;
margin:2px 10px 10px 2px;
float:left;
border:1px solid #336699;}
HTML:
<div id="auctionlisthead">AAMG Staff</div>
<div id="staffwrap">
<div id="staffmini"><img src="" width="100" height="125" /><br /> ¦ <a href="#billy">bio</a></div></div>
Further down page:
<div id="staffwrap">
<div id="auctionlisthead">Staff Bios</div>
<div id="staffbio"><div id="billy" class="offset"></div><img id="staffpic" src="" width="100" height="125" />
<div id="staffhead"><u>William J. Summs</u><br />
President, CEO, Auctioneer</div></div></div>
Any help with this would be appreciated. Please let me know if you need any of the header code or anything. This one has me lost.
Cheers,
Laudez
The standard merely says that the element's original position remains reserved for it
[w3.org...]
It's probably safer and more future proof to seek this in the form of javascript.
