Internet Explorer target and anchor problems

[hanso42]

I am creating a website from scratch and am running into problems with my targets and anchors. I'll give an example of what happens.

I am currently viewing page 1. I want to go to a specific part of page 2 using my link to a named anchor. When I click on the link, it takes me to page 2, but not the right place on the page. The named anchor appears at the bottom of the page, instead of the top. If I refresh the page, or go back and do it again, then it works as it should. Anytime after the first attempt, it will go to the right place on the page. I have many pages that are like this, and they all do the same thing.

The catch is, it all works perfectly in Firefox and Opera but not with IE, so the problem is probably with IE. Does anyone have any idea why this is?

Thanks for your help!

[penders]

Hhhmmm... this problem seems to crop up a lot with IE - I've even noticed this happening on the W3.org site. It can often be fixed (or at least helped) though. Not having any content in a named anchor is sometimes the problem, or not specifying width/height attributes on images - because the exact location of the link is unknown until the entire page loads.

Try these recent threads...
[webmasterworld.com...]
[webmasterworld.com...]
[webmasterworld.com...]

[hanso42]

Thanks for the help. I have text inside of the named anchor and I'm not using images, so height and width shouldn't be a problem. My code looks something like this:

[<h2 class="teams"><a name="giants">San Francisco Giants</a></h2>]

The weirdest thing is that it works fine on every click after the first, and there is only a problem with IE.

[penders]

The weirdest thing is that it works fine on every click after the first, and there is only a problem with IE.

Once you have visited the page, it is then in the browsers cache and can be recalled quickly. And that seems to be the key.

Unfortunately I think the issue is related to the speed of connection, page size (KBs) and how 'fluid' the page is (are there many elements with a variable width/height? Like <p> text for instance?)

The browser needs to know/calculate the exact position on the page of the named anchor before it can jump to it. So, if there are lots of 'fluid' elements, these have to have already loaded. Unfortunately IE6 seems to timeout?! It hangs on for a few secs, but then seems to give up if the necessary page elements haven't loaded!? Either not going anywhere, or going to the wrong place!

A way to demonstrate this... under a 2mbps broadband connection the following link works for me everytime in IE6:
[w3.org...]

However, clear the cache and connect via dial-up (40Kbps) and it doesn't! The results are mixed, sometimes it gets 'close' (ie. a page too high), at other times it doesn't get anywhere! Once the page is in the cache, it usually works OK. (FF is OK)

For a page with a few 'heavy' images then it could be a lot worse.

So, for those using IE, it could work for some users and not others I guess. On some pages and not others.

Hhhmmm, if that's the case, I'm not sure how it can be fixed (in IE6)? Is it the same with IE7?

[tedster]

Have you tried separating the two elements?

<a name="giants"></a>
<h2 class="teams">San Francisco Giants</h2>

Sometimes simplification like that can help a buggy browser to a better job,

[hanso42]

penders - yeah, I have been working with it in IE7 this whole time. Thanks for the description of what is going on. My pages aren't big and don't have images so i still don't really know. I'm using feeds on the pages though so that could definitely be a cause. It's probably taking time getting the info from the source and then times out and just gets close to the right place on the page like you said. Then when I reload the page it already has the feed info so it finds the right place. If that's the case, is there any way to make it load faster so that it doesn't time out like you talked about?

tedster- I gave it a shot, but it didn't change anything. Thanks for the idea though.

[encyclo]

Rather than using

name

on an anchor, you should really be using

id

instead. It's the recommended replacement for the deprecated

<a name="foo"></a>

you are currently using:

<h2 class="teams" [b]id="giants"[/b]>San Francisco Giants</h2>

I can't say whether it would have any effect on your particular bug, unfortunately.

[rocknbil]

^ ^ ^ Agreed. Whenever I have problems with anchors it's almost always because I have two or more of the same-named anchors on the pages. Be sure they are unique. The other problem is if there is an HTML error in the way. Validate your pages to eliminate this possibility.

[hanso42]

I switched the <a name="#"> to id="" and that cleans up the code some, but like you mentioned, it didn't have an effect on the bug.

I really think the problem is with the feeds I'm using. Since my page is getting information from other sites, it takes a while to get it all and put it in the right spot on the page. Then, when it goes down to try and find the right spot, it "loses focus" for lack of a better way of putting it and just gets close to the right spot. Then, after the info is loaded, it can find the right spot cause it doesn't have to worry about loading all the info. That's just my opinion, but does anyone have an idea how to fix that? Would I just have to do away w/ using feeds in order to fix the problem?