Anchor Tag with #Name Moves Entire Window Up instead of 'Jumping'

[tickletantrum]

This question was asked once on Bytes.com, but the 'asker' was Amateur to say the least and the question was never fully answered.

So here is the question. I am designing a page containing a listing of 'entries.' The title of the entry is linked and looks like shown below:

[HTML]<href="#e1" name="e1">Text</a>[/HTML]

The expected behavior of this is for the page to 'Jump' down to the element named 'e1' (in this case, itself), however, instead the entire page moves upward. The Header, navigation and everything above the element named 'e1' is now in the negative numbers.

It is as if this simple bahavior is making the element's parent container positioned absolute and then applying a negative value to the top, (example: top:-500px).

I have been making websites for quite a long time and never had any problem with this type of bahavior, nor have I ever seen this happen nor do I know what would ever cause this to happen. I have not debugged HTML to validate (the doctype is xhtml strict), as that could be the problem, but in my experience that should not effect the behavior of browser functionality.

The URL to see this quirky behavior in action is here
Very Odd Anchor Fragment Behavior
(Click on the title below the brown horizontal bar to replicate the issue)

(HTML, Doctype or CSS issue?)

I appreciate any advice you can offer, thanks for reading!

[drhowarddrfine]

Your link doesn't show anything.
I assume you mean <a href=... and not just <href?

From your description, it sounds like it's behaving as it should but I guess I'm misunderstanding.

[tickletantrum]

Yes, I miswrote the html, my apologies, but thanks for your attn to detail!

That's weird that the link doesn't work, it works perfectly for me! Apparently my server has been encountering DNS issues, and it only resolves part of the time. But I would like to ensure you, the link is not broken.

No, it is not behaving as it should.

Correct Behavior:
1) When clicked the page should 'Jump' or 'Scroll' to the Fragment. When looking at your scrollbar the bar would be part way down the page and there would be a gap between the position of the 'bar' and the top of the scroller.

This Occurence:
1) When clicked the page does not 'jump' or 'scroll' but instead the entire page is readjusted to the top of the screen. Now, when looking at the scrollbar the bar is completely at the top of the scroller, there is no gap between the 'bar' and the top of the scroller. The top of the page is now the Fragment belonging to the href. You can NOT scroll back up, as that Fragment is NOW the TOP of the page.

Sorry if there is redundancy, but this issue is relatively difficult to explain with text, something you have to experience for yourself. Maybe a screenshot would help ... that would be my next post

[drhowarddrfine]

Yes, I know how it's supposed to work but I wasn't sure you meant it jumped to the top. Does it happen if you don't point that href at itself?

[tickletantrum]

Just tried moving the name parameter to a different element; and yes, the odd behavior is a persistent little bugger.

Here are screenshots for clarity: (you may not be able to see them due to being on the same server you cannot access, if this be the case, reply and I will upload to photo host.)

before:

after:

[tickletantrum]

I have discovered the source of the problem, maybe this could be of help to anyone who may experience the same issue anytime in the future.

For this design I experimented with some code I found on AListApart. The code is used to make all columns equal height, so if one had more content than another, it would still be 100% high. The code for this is below:

    #container .column {
        padding-bottom: 1001em;     
        margin-bottom: -1000em;
    }
 

This 'equal height columns' code effectively destroys the Anchor Fragment functionality.

In my case I will now have to replace this more semantic approach with the uglier approach of giving my container a background-image to simulate equal height columns; or simply find a fix for this.

Thx dr for your attempt to help me, I appreciate your repid responses, have a great one!