"Named Anchor" Hack/Workaround for Safari??

DesignIt · Dec 15, 2005, 01:33 PM

Does anybody know of a work around for "named anchors" in Safari? Safari is the only browser where this (named anchors) does not work.

OutThere · 02:07 PM

As far as I know there is no problem...I just made a quick page with the following code and it worked perfectly.

Code:

<html>
<head>
<title>
Test Page
</title>
</head>
<body>
<a href="#whatever">Test Link</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<a name="whatever">It worked!
</body>
</html>

DesignIt · Dec 15, 2005, 01:57 PM

Quote:

Originally Posted by OutThere

As far as I know there is no problem...I just made a quick page with the following code and it worked perfectly.

Code:

<html>
<head>
<title>
Test Page
</title>
</head>
<body>
<a href="#whatever">Test Link</a>
<br><br><br><br>
<a name="whatever">It worked!
</body>
</html>

That doesn't really show anything because the link isn't "moving" the page anywhere.

OutThere · Dec 15, 2005, 02:07 PM

Fixed

DesignIt · Dec 15, 2005, 02:23 PM

Quote:

Originally Posted by OutThere

Fixed

THanks for your reply and effort, but with all due respect, nothing has been fixed. =)

encephalon · Dec 15, 2005, 02:28 PM

Worked for me

revisionA · Dec 15, 2005, 02:38 PM

check a list apart or boxes and arrows
!
$

CanadaRAM · Dec 15, 2005, 02:57 PM

I'm sorry, you'll have to qualify your question better.

"Safari is the only browser where this (named anchors) does not work." This general assertation is not true.

I've just visited one of my own sites with named anchors (Dreamweaver coded) in Safari (OS 10.3.9) and it works perfectly.

If you have a problem with a specific version of Safari, or specific HTML code, please elaborate.

DesignIt · 11:01 AM

Quote:

Originally Posted by CanadaRAM

I'm sorry, you'll have to qualify your question better.

"Safari is the only browser where this (named anchors) does not work." This general assertation is not true.

I've just visited one of my own sites with named anchors (Dreamweaver coded) in Safari (OS 10.3.9) and it works perfectly.

If you have a problem with a specific version of Safari, or specific HTML code, please elaborate.

Very true. Pretty vague question. Here is a link to the page that doesn't work:

link removed temporarily

CanadaRAM · Dec 15, 2005, 03:47 PM

Quote:

Originally Posted by DesignIt

Very true. Pretty vague question. Here is a link to the page that doesn't work:

http://dev.nootgroup.com/dev.theshor...j/features.htm

I think Safari need <A Name= instead of <A ID=
You can combine the two, for backwards compatibilty
<a id="anchorname" name="anchorname" />

http://www.jimthatcher.com/skipnav.htm

OutThere · Dec 15, 2005, 03:48 PM

Quote:

Originally Posted by DesignIt

THanks for your reply and effort, but with all due respect, nothing has been fixed. =)

Well technically I fixed my example so that it demonstrated that named anchors do in fact work in Safari...now I did not fix your page, I'll admit that. Maybe it has something to do with the fact that it's linking to a different scrolling section?

DesignIt · Dec 15, 2005, 03:53 PM

Quote:

Originally Posted by CanadaRAM

I think Safari need <A Name= instead of <A ID=
You can combine the two, for backwards compatibilty
<a id="anchorname" name="anchorname" />

http://www.jimthatcher.com/skipnav.htm

I've tried that too previously. That's why I've concluded that it is possible only thru javascript.

radiantm3 · Dec 15, 2005, 06:36 PM

I'm not sure if this is causing the issue, but you have multiple ID's with the same name. ID's have to be unique to a page (meaning only 1 instance of an ID on a page). You can anchor directly to any tag with an ID. Here is the best way to do it:

Code:

<ul class="skiplist">
	<li><a href="#cont">Skip Navigation.</a></li>
	<li><a href="#side">Jump to Side Bar.</a></li>
</ul>
.
.
.
.
.
.
.
.
.
.
<div id="cont">
All your Main content is in here.
</div>
<div id="side">
All your sidebar elements here.
</div>

The links will jump to the ID's respectively. You are just using way too many unnecessary tags, classes, and IDs.

CanadaRAM · Dec 15, 2005, 07:02 PM

Quote:

Originally Posted by DesignIt

I've tried that too previously. That's why I've concluded that it is possible only thru javascript.

OK, sorry to have taken up your time with things you already tried

DesignIt · Dec 16, 2005, 10:28 AM

Quote:

Originally Posted by CanadaRAM

OK, sorry to have taken up your time with things you already tried

I appreciate your help, I hope you didn't take that in the wrong way.
Thanks again! =)

DesignIt · Dec 16, 2005, 10:41 AM

Quote:

Originally Posted by radiantm3

I'm not sure if this is causing the issue, but you have multiple ID's with the same name. ID's have to be unique to a page (meaning only 1 instance of an ID on a page). You can anchor directly to any tag with an ID. Here is the best way to do it:

Code:

<ul class="skiplist">
	<li><a href="#cont">Skip Navigation.</a></li>
	<li><a href="#side">Jump to Side Bar.</a></li>
</ul>
.
.
.
.
.
.
.
.
.
.
<div id="cont">
All your Main content is in here.
</div>
<div id="side">
All your sidebar elements here.
</div>

The links will jump to the ID's respectively. You are just using way too many unnecessary tags, classes, and IDs.

Thanks. I realize I am no expert with CSS and still learning. Although, as far as I know, I am not using any duplicate ID's. Where are you finding multiple ID's with the same name?

radiantm3 · Dec 16, 2005, 04:10 PM

I just saw it once, at the top so I assumed there's a chance there might be more:

Code:

<ul class="skiplist">
	<li class="skip"><a href="#cont" id="menu">Skip Navigation.</a></li>
	<li class="skip"><a href="#side" id="menu">Jump to Side Bar.</a></li>
</ul>

You are using the menu ID twice here. You could really optimize that block of code too. You would have the same amount of styling capability with something like this:

Code:

<ul id="skiplist">
	<li><a href="#cont">Skip Navigation.</a></li>
	<li><a href="#side">Jump to Side Bar.</a></li>
</ul>

Since you only have 1 instance of your #skiplist on a page, make it an ID. Then you can style each element within skiplist like this:

#skiplist li{}
#skiplist li a{}

No need to add classes and IDs to the li and a tags.

DesignIt · Dec 16, 2005, 06:41 PM

Quote:

Originally Posted by radiantm3

I just saw it once, at the top so I assumed there's a chance there might be more:

Code:

<ul class="skiplist">
	<li class="skip"><a href="#cont" id="menu">Skip Navigation.</a></li>
	<li class="skip"><a href="#side" id="menu">Jump to Side Bar.</a></li>
</ul>

You are using the menu ID twice here. You could really optimize that block of code too. You would have the same amount of styling capability with something like this:

Code:

<ul id="skiplist">
	<li><a href="#cont">Skip Navigation.</a></li>
	<li><a href="#side">Jump to Side Bar.</a></li>
</ul>

Since you only have 1 instance of your #skiplist on a page, make it an ID. Then you can style each element within skiplist like this:

#skiplist li{}
#skiplist li a{}

No need to add classes and IDs to the li and a tags.

Oh...you are referring to the span class I have to change the color of the bullets. This is the first time I have used a li, in case it wasn't obvious.

I'm not too terribly concerned about those, as they aren't what's causing the "anchors" to not work.

Thanks for your tips!

radiantm3 · Dec 16, 2005, 07:27 PM

Quote:

Originally Posted by DesignIt

Oh...you are referring to the span class I have to change the color of the bullets. This is the first time I have used a li, in case it wasn't obvious.

I'm not too terribly concerned about those, as they aren't what's causing the "anchors" to not work.

Thanks for your tips!

Well you can never tell what is causing a bug until you can fix all the errors to eliminate the possibilities. I always start by making sure my pages validate:
http://validator.w3.org/check?uri=ht...%2Fskipnav.htm

rd10332 · Dec 18, 2005, 09:09 AM

I'm still having a little trouble. I want to link from page 1 to an anchor on page 2. But when I click on the link in safari it doesn't work, it only brings me to the page itself, not to the anchor, while it does work with IE (mac). Anybody any thoughts on this?

The anchor does work in safari when I place the link on the same page btw.

Thanks, Tim

rendezvouscp · Dec 18, 2005, 11:40 AM

Quote:

Originally Posted by rd10332

I'm still having a little trouble. I want to link from page 1 to an anchor on page 2. But when I click on the link in safari it doesn't work, it only brings me to the page itself, not to the anchor, while it does work with IE (mac). Anybody any thoughts on this?

The anchor does work in safari when I place the link on the same page btw.

Thanks, Tim

I think that this is an actual limitation on Safari's part. I don't think I've ever seen this work properly.

-Chase

radiantm3 · Dec 18, 2005, 06:57 PM

Quote:

Originally Posted by rendezvouscp

I think that this is an actual limitation on Safari's part. I don't think I've ever seen this work properly.

-Chase

It works fine for me on my website. Are you guys using the latest version of safari?

DesignIt · Dec 19, 2005, 11:35 AM

Quote:

Originally Posted by radiantm3

Well you can never tell what is causing a bug until you can fix all the errors to eliminate the possibilities. I always start by making sure my pages validate:
http://validator.w3.org/check?uri=ht...%2Fskipnav.htm

I did validate this page and the only thing that didn't pass was the fact that I have an image sitting inside of the, ul and li, coding. I'm not sure why this isn't allowed. If I don't put the image there, I don't like how it sits up really high away from the list.

Also, even with the image in the correct location (ie-page validated), the name anchor still doesn't work in Safari.

radiantm3 · Dec 19, 2005, 03:03 PM

Quote:

Originally Posted by DesignIt

I did validate this page and the only thing that didn't pass was the fact that I have an image sitting inside of the, ul and li, coding. I'm not sure why this isn't allowed. If I don't put the image there, I don't like how it sits up really high away from the list.

Also, even with the image in the correct location (ie-page validated), the name anchor still doesn't work in Safari.

If you are using the latest version of safari then you must still have a problem with your code because name anchoring works on all of my websites just fine in safari.

Also, I still get validation errors on that page on your site. You still have 2 of the same IDs which I mentioned towards the beginning of this thread.

DesignIt · Dec 19, 2005, 03:16 PM

Quote:

Originally Posted by radiantm3

If you are using the latest version of safari then you must still have a problem with your code because name anchoring works on all of my websites just fine in safari.

Also, I still get validation errors on that page on your site. You still have 2 of the same IDs which I mentioned towards the beginning of this thread.

I guess I am at a loss then because I am not aware of the 2 ID's you are referring to.

edit: I am using this version of Safari: 1.3.1 (v312.3.3)

Dec 15, 2005, 01:33 PM	#1
DesignIt macrumors member Join Date: Aug 2005	"Named Anchor" Hack/Workaround for Safari?? Does anybody know of a work around for "named anchors" in Safari? Safari is the only browser where this (named anchors) does not work. __________________ 1.67GHz 15" PowerBook w/SuperDrive

Dec 15, 2005, 02:07 PM	#4
OutThere macrumors Demi-God Join Date: Dec 2002 Location: the good life	Fixed __________________ puisqu'on est jeune et con, puisqu'ils sont vieux et fous. . .

Dec 15, 2005, 02:38 PM	#7
revisionA macrumors regular Join Date: May 2005	check a list apart or boxes and arrows ! $ __________________ Mac Pro 8core (2.8 QC x2) 2gig / 1 TB WD Caviar Black / ATI HD 2600 256mb / 3GS Iphone Black 32GB

Dec 15, 2005, 02:57 PM	#8
CanadaRAM Contributor Join Date: Oct 2004 Location: On the Left Coast - Victoria BC Canada	I'm sorry, you'll have to qualify your question better. "Safari is the only browser where this (named anchors) does not work." This general assertation is not true. I've just visited one of my own sites with named anchors (Dreamweaver coded) in Safari (OS 10.3.9) and it works perfectly. If you have a problem with a specific version of Safari, or specific HTML code, please elaborate. __________________ Expert Ex = former, no longer. Spurt = a leak, esp. when caused by water pressure. Expert = a has-been drip under pressure.

Dec 15, 2005, 06:36 PM	#13
radiantm3 macrumors 6502a Join Date: Oct 2005 Location: San Jose, CA	I'm not sure if this is causing the issue, but you have multiple ID's with the same name. ID's have to be unique to a page (meaning only 1 instance of an ID on a page). You can anchor directly to any tag with an ID. Here is the best way to do it: Code: <ul class="skiplist"> <li><a href="#cont">Skip Navigation.</a></li> <li><a href="#side">Jump to Side Bar.</a></li> </ul> . . . . . . . . . . <div id="cont"> All your Main content is in here. </div> <div id="side"> All your sidebar elements here. </div> The links will jump to the ID's respectively. You are just using way too many unnecessary tags, classes, and IDs. __________________ My website and my photos

Dec 15, 2005, 02:28 PM	#6
encephalon macrumors member Join Date: Jul 2002	Worked for me

Dec 16, 2005, 04:10 PM	#17
radiantm3 macrumors 6502a Join Date: Oct 2005 Location: San Jose, CA	I just saw it once, at the top so I assumed there's a chance there might be more: Code: <ul class="skiplist"> <li class="skip"><a href="#cont" id="menu">Skip Navigation.</a></li> <li class="skip"><a href="#side" id="menu">Jump to Side Bar.</a></li> </ul> You are using the menu ID twice here. You could really optimize that block of code too. You would have the same amount of styling capability with something like this: Code: <ul id="skiplist"> <li><a href="#cont">Skip Navigation.</a></li> <li><a href="#side">Jump to Side Bar.</a></li> </ul> Since you only have 1 instance of your #skiplist on a page, make it an ID. Then you can style each element within skiplist like this: #skiplist li{} #skiplist li a{} No need to add classes and IDs to the li and a tags. __________________ My website and my photos

Dec 18, 2005, 09:09 AM	#20
rd10332 macrumors newbie Join Date: Dec 2005	I'm still having a little trouble. I want to link from page 1 to an anchor on page 2. But when I click on the link in safari it doesn't work, it only brings me to the page itself, not to the anchor, while it does work with IE (mac). Anybody any thoughts on this? The anchor does work in safari when I place the link on the same page btw. Thanks, Tim

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode