internal a href links

[pease]

Good evening all,

Todays problem (should you wish to help me out) is one thats probably extremely simple but its losing me!


I have a single page long length scrolling site with a fixed header (that everything scrolls up underneath).

I want to have internal links which will sit in the header bar, Ive set these up however when it goes to the link it loses the first 150px of the article (as its jumped to the top of the page and underneath the header).

Is there any way to set the hyperlink to goto 150px further down the page? I could set up an advert of 150px between each article and have the <a tag before that but its not ideal as people scrolling the page will have to read through them.

 

[BillyRayPreachersSon]

All information given here is based upon my fixed header code in this post: thread215-1376243. You would need to post your own code for a more accurate reply.

A quick win in some browsers (Fx3, Opera) is to use an anchor as the bookmark, and give it a top padding of the height of your header:

<a name="whatever" style="padding-top:50px;"></a>

The beauty is that no browser will render that top padding, as the element is inline by default

The above trick doesn't work in Safari or Chrome, with the start of the section going under the header.

With IE6, IE7, and IE8 (in non-compatibility mode), you get different behaviour depending on whether you are in 'quirks' mode or not (and I thought MS had removed this from IE7 and IE8!).

In 'quirks' mode, IE6 plays ball, showing the bookmark under the header. IE7 and 8 don't keep the header fixed at all.

In 'standards' mode, IE6 doesn't keep the header fixed, IE7 puts the bookmark under the header, and IE8 works as you would want.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/