We help IT Professionals succeed at work.

Named anchors not working in Safari

Marisa
Marisa asked
on
On my homepage, I have four different links, all going to another page, but different spots on that page. I am using named anchors to achieve this.

If you look at the three boxes that show our specials, underneath the main banner, you'll see links that read, "click for details." These all go to the page specials.html, but to different parts of the page. specials.html#woven, specials.html#hang, specials.html#printed.

This all works fine in every browser except for Safari. In Safari, it just takes you to a random place in the middle of the page.

http://customwovenlabels.com/
Comment
Watch Question

Top Expert 2011
Commented:
Hmmm.. they work OK for me using safari 5.1.2 on Win XP.

The #woven tag drops me below the "Woven Labels Special" header, but that is because of where the anchor is defined (the other anchors, #hang and #printed are above class=wrapper DIV, whereas #woven is inside the class=wrapper div).

Since they work on the only machine I have access to, I cannot help further, but someone else may be able to ... which OS and browser version are you seeing the issue on?
MarisaWeb Design

Author

Commented:
Well, my boss pointed it out to me, and he is using Safari on a Mac, but I have no idea which versions, and I'm sure neither does he.

I was able to replicate the issue on my Win7 64bit machine using Safari 5.1.1
MarisaWeb Design

Author

Commented:
Where is LZ1? I need him!
MarisaWeb Design

Author

Commented:
This seems like such a simple thing for an expert. I hate to keep bumping this, but my boss in breathing down my neck about it.
Top Expert 2011
Commented:
I was able to recreate this on Win 7, Safari 5.1.2.

Order of events:
1- go to #woven
2- go back to main page, click link that goes to #printed
Noted behavior - page initially jumps to the #printed anchor, but then immediately scrolls back to where the user was before (#woven).

Similarly...
1- go to #woven
2- scroll to bottom of page and click custompatches link in footer
3- use back button - you are taken back to page showing footer
4- refresh the page - you expect to be taken back to #woven, but instead are returned to where you were last (the footer where you clicked the link)

Try adding this to the page to see if "no cache" clears it up.
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

Open in new window


MarisaWeb Design

Author

Commented:
I am assuming I should put in on the specials.html page. I did, but it didn't seem to do anything. I cleared my cache and restarted the browser too.
Top Expert 2011

Commented:
sigh... sorry - no clue really.

You could try "hacking it up" .... put an ID on your anchors and when the page loads, set the focus to that ID... but that's just a guess (and a sucky solution anyway... ), sorry.
Top Expert 2011
Commented:
Google "Safari Anchor Problem" and you'll see that this issue has existed for a long long time.  There are a variety of ways to work around this posted on the various message boards.
Top Expert 2011
Commented:
Something random to try... i noticed most of your anchors are not inside the wrapper div... try moving your anchor tags into the DIV that they belong to (or at least wrap them in a div).  Some posts seem to suggest that that may help.  

e.g., move this:
<a name="hang" id="hang"></a><br />

Open in new window


To here:
<h1 class="p2">Woven Labels and Hang Tags Combo Special</h1><a name="hang" id="hang"></a><br />

Open in new window

MarisaWeb Design

Author

Commented:
Aaaaaah, still no! I really thought that would work! I really appreciate your continued effort.
MarisaWeb Design

Author

Commented:
OK, something just dawned on me. I was blaming it on Safari, but it turned out that Firefox is the only browser that it DOES work in! It doesn't work in IE or Chrome either! I even made sure it was valid HTML5 and that still didn't work!
MarisaWeb Design

Author

Commented:
Nothing has solved the problem but you tried really hard so I'm giving you the points.