Safari anchors on links not working - html

My html anchor is as follows.
<a name="template-8"/>
<h4 class="template" id="template-8">A title</h4>
As far as I know the browser should skip to the element with a matching name or id attribute.
When I type in the url http://my.site.com/templates#template-8 safari jumps down the page as expected.
However when linking as below the anchor does nothing. Chrome, Opera, IE7 and Firefox all work.
A link
Safari is version 5.0, could this be a safari bug?

The problem was I had a redirect header in the page I was linking to.
Opera, IE, Chrome, Firefox will carry over the anchor to the new page. However safari loses the anchor on the redirect.
If you are having trouble with safari anchors disable any redirects.

For me, I simply had to change
http://domain.com/page#myanchor
to
http://domain.com/page/#myanchor

I just ran into the same issue and found your post while searching - obviously you've fixed this since it was back in 2010 and but figured I would post what I found in case someone else finds this. :)
I'm using htaccess to redirect my url from mydomaincom/index.php to mydomaincom/ and found that my nav didn't work in Safari since my href addresses where index.php#value and Safari v5 wouldn't carry over the anchor links.
Rather than turn off my redirect I just changed the urls to point to mydomaincom/#value. Not only did this work great for all browsers but it also made my page quicker (not yet sure how but will search this now :))

There are two side issues I see, which aren't the cause (since you found the problem already) but probably don't help:
Self-closing <a> tag. You can't self-close tags that are supposed to have end tags, it should be: <a name="template-8"></a>.
The name and id attributes share the same "namespace", so you cannot have the same value for a name and id attribute. All browsers from the past 10 years support anchors on IDs, so scrap that useless link tag.

It has not worked with the previously proposed solutions, it has worked for me to create a redirection using javascript in the following way.
<!-- <a href="#first-block"> -->
<a href="javascript:redirection('first-block')">
function redirection(destination){
window.location.href = "example.com/page.html#" + destination;
}
I leave it here in case someone serves you in the future.

To fix an anchor tag in Safari. I proceed this way :
A tag
And on my css file :
.btn{
display:block;
width:100%;
height:100%;
}
The important thing is for some reason, sometimes Safari needs to see your link as a block, and it can be useful if you create a list, with some links inside.
Example :
<ul>
<li>A tag</li>
<li>A tag</li>
</ul>
Works for Safari 6+

Related

Browser compatibility for button

I have the following html:
<div class="awpcp-subtitle">Contact Information
</div>
Contact $adcontact_name
<a href="tel:$adcontactphone">
<div class="phone">$adcontactphone
</div>
</a>
<div class="location">
<Location: </label> London, UK</div>
This makes a button link to dialing screen on mobile, with the number displayed on screen.
It works fine in Android, on Chrome/ Firefox, but as soon as I try it on an Apple phone on Safari, instead of just linking to dialing screen with the number displayed, it asks if I want to dial this:
<br><label>,hone<label>07945xxxx
When I press yes, it says it can't dial:
<br><label>,hone<label>07945xxxx
For obvious reasons in that it can't dial a code.
This must be a Safari iPhone/Mac issue, and what on earth does 'hone' mean anyway?
So I tried this html after the tag in my header.php, to make my site browser compatible.
<script
src="css_browser_selector.js"
type="text/javascript"></script>
This didn't work for the phone issue (there are others but let's stick to this for now.)
So how do I get apple iPhone, using Safari browser, to perform the same simple task as Firefox, Chrome, Android etc.
Perhaps there is a way to hide
<br><label.....
Like:
.div class ["<BR><label..."]
{display: none}
? It's behaving like published text so treat it as such?
I came across this but not sure what to do with it or if it is the right code? I'm getting the same issue with Google maps
"<"followedby"!"<br/><label>Phone:
</label>""followedby">"
"<"followedby"!"<br/>.
<label>Location:
</label>""followedby">"
But
$adcontactphone
Represents generic phone as well as specific phone number -including label tags
Based on the link provided in the comments I can deduce that $adcontactphone is being assigned the following value:
<br/><label>Phone:</label> 7576XXXXXX
You can see that string contains valid html tags, but then you are using $adcontactphone inside an href attribute:
<a href="tel:$adcontactphone">
...
</a>
This results in the following html after interpolating the variable:
<a href="tel:<br/><label>Phone:</label> 7576XXXXXX">
...
</a>
Many browsers will not consider this as a usable value for href. Some browsers may be made to filter out tags inside the attribute and others may not. This is not a browser compatibility issue because each browser is free to handle this invalid attribute in its own way.
If you fix $adcontactphone to contain just the phone number you will find that the link will start working in most browsers. The result you are aiming for would be this:
<a href="tel:7576XXXXXX">
...
</a>
There are also other invalid html problems that should be fixed to be sure that this section of your page is consistent across all browsers. For example:
<div class="location">
<Location: </label> London, UK</div>
You have an unmatched < here, also Location is not a supported html tag so some browsers may not like that.
Maybe it should look like this?
<div class="location">
<label>Location:</label> London, UK
</div>

Anchor with background-position not displayed, a Firefox bug? - Solved: Adblock Plus blocking Google anchor

All day long I am trying to find the source of the following problem.
I am using this HTML:
<div class="sharebox">
<a class="shlink tooltipS" title="trumpa nuoroda į šį puslapį" href="http://www.klaustukai.lt/5"></a>
<a class="shprint tooltipS" title="spausdinti" href="javascript:window.print();"></a>
<a class="shfb tooltipS" title="dalintis Facebook" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.klaustukai.lt"></a>
<a class="shgp tooltipS" title="dalintis Google+" href="https://plus.google.com/share?url=http%3A%2F%2Fwww.klaustukai.lt"></a>
<a class="shtw tooltipS" title="dalintis Twitter" href="https://www.twitter.com/share?url=http%3A%2F%2Fwww.klaustukai.lt"></a>
</div>
with this CSS:
.shlink, .shprint, .shfb, .shgp, .shtw {
position:absolute;
display:inline-block;
background:url(http://www.klaustukai.lt/qa-theme/kt/elements.png) no-repeat 0 0;
border:0;
height:16px;
width:16px;
}
.shlink {background-position:-2px -250px;left:4px;top:5px;}
.shprint {background-position:-22px -250px;left:27px;top:5px;}
.shfb {background-position:-40px -250px;left:50px;top:5px;}
.shgp {background-position:-58px -250px;left:73px;top:5px;}
.shtw {background-position:-76px -250px;left:96px;top:5px;}
.shlinktxt {display:block;width:115px;margin-top:30px;}
.shlinktxt input {font-size:10px;color:#555;width:100%;}
where elements.png holds the graphics for the background. Nothing special, nothing fancy. And works for years in all browsers.
The weird thing: When I do a test in a separate test.html it works fine, even in Firefox 27.0.1. But having the exact same code in this forum: klaustukai.lt will not show the google plus button class .shgp.
This happenend after the last update of Firefox to version 27.0.1. Before it worked! This is why I think it might be a Firefox bug. In Chrome and Internet Explorer displaying the button works as expected:
Firefox 27.0.1
What I see from the Firefox developer tool Box Model is that the .shgp element has height:0 and width:0 - it also seems to have lost position, the indicator shows it now top left on the website.
I also tried to reposition the sharebox, I disabled javascript, same problem, it is always the .shgp anchor that fails.
When testing, I realized that if I save the HTML page locally and load it again in the browser, the button is displayed correctly. Even more confusing.
This is such a weird issue for me. Who knows what is causing this behaviour? And how can the .shgp anchor be displayed correctly?
Your help is very much appreciated.
Found the source of the problem!
The culprit has been the Addon Adblock Plus that is blocking the google plus anchor!
If you disable the addon the button appears.
Cannot believe... but now everything gets more clear. I installed Adblock Plus on Chrome and the button disappeared as well. Good to know that it is not a Firefox bug.

Hyperlink Bookmarks Links not working in Firefox

I've got an un-complicated .aspx page and I've added some bookmark anchors at that re-direct to a different page with bookmarks.
The anchors look like this:
From http://www.davincispainting.com/painting-solutions
<a class="questionLink" href="painting-answers#Answer7">Paint Chalking</a>
When you click on this Hyperlink in Firefox, the URL does indicate the bookmark:
http://www.davincispainting.com/painting-answers#Answer7
However, this do not navigate to the actual bookmark in the 2nd page
<h2 id="answer7">Paint Chalking</h2>
The problem occurs in Firefox but not IE8.
I originally thought that the Routing was causing the issue, as I do not inlcude the .aspx page extension in the link. So I added the extension, which still doesn't work.
<a class="questionLink" href="painting-answers.aspx#Answer7">Paint Chalking</a>
How can I debug this problem?
Does the page file end in an extension? If so, make sure your link includes the extension. Also, check your capitalization. Also, the standard practice for the bookmark syntax is to not navigate based on ID of a random control, but rather the anchor tag. See W3 Schools Example.
You should have...
<a id="answer7" />
<h2>Paint Chalking</h2>
and the link should look like this:
<a class="questionLink" href="PATHTOPAGE#answer7">Paint Chalking</a>
Where PATHTOPAGE is replaced with the absolute or relative path to the other page. Make sure that resolves.
The problem was the name itself:
<h2 id="Answer7" style="font-size:1.5em; color:Green;">Paint Chalking</h2>
is different than:
<h2 id="answer7" style="font-size:1.5em; color:Green;">Paint Chalking</h2>

Anchor link landing in wrong position

Probably a stupid question, but I honestly can't wrap my head around what's going wrong here.
http://harrisonfjord.com/thinkinc/
A site I'm building at the moment. I want to make an anchor link at http://harrisonfjord.com/thinkinc/index.php#sponsors. I've set up the anchor to occur just before in the following code:
<a name="sponsors"></a>
<div class="sponsors">
<div class="sponsors-left">
<h2>Sponsors</h2>
<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
</div>
However, when you click on the anchor link it lands about halfway down the div. I thought it might have been a problem with the images loading after the anchor link loads, so I manually put in widths/heights for all of the tags. I also did the same for the cufon text replacement in the title bar.
None of that helped, so now I turn to you. The anchor is also not working in Firefox, for whatever reason. Any thoughts on what I've done wrong here?
Cheers!
I think the problem is resulting from the anchors with no contents that you are using.
Also, it appears that name= has been deprecated in favor of id= as a fragment identifier in certain elements (including A) which makes a kind of sense as ID attributes are unique whereas NAME attributes are not so guaranteed.
I'd try sticking the fragment identifier in the actual renderable entity such as:
<h2 id="sponsors">Sponsors</h2>
and see where that gets you. Incidentally, it looks like a good conference, I hope you get a comp admission.
I got the exact same issue in Firefox and solved it with this (same as sasi answer but more generic - it detect if there is an anchor in the url and scroll to it):
$(document).ready(function() {
if(window.location.hash.length > 0) {
window.scrollTo(0, $(window.location.hash).offset().top);
}
});
It seems it's a well known issue, see https://bugzilla.mozilla.org/show_bug.cgi?id=60307
I got problem in iphone for links with fragments, having
TYPES OF INFORMATION WE COLLECT, correctly linking to
<h3 id="info">TYPES OF INFORMATION WE COLLECT</h3>.
That wasn't working properly, and I fixed with a solution like this (using jQuery):
window.scrollTo(0,$('#info').offset().top);
I solved this with a trick, I have put an empty span element with the required ID and a line break before the div
<span id="sponsors"> </span>
<br>
<div class="sponsors">
<div class="sponsors-left">
<h2>Sponsors</h2>
<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
</div>
</div>
GO TO SPONSORS
I don't know what standard your page is trying to conform to, but it is full of errors:
http://validator.w3.org/check?uri=http%3A%2F%2Fharrisonfjord.com%2Fthinkinc%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Some of them so severe, for example:
Unable to Determine Parse Mode!
No DOCTYPE found, and unknown root element. Aborting validation.
that the validator gives up. Contrasted with a page like gnu.org
http://validator.w3.org/check?uri=www.gnu.org&charset=%28detect+automatically%29&doctype=Inline&group=0
You should be pleased that the site renders at all.
I had a problem with scrolling to the wrong position and I fixed it by disabling the Development Tools panel in Chrome :) Apparently Chrome calculates the position incorrectly when DevTools is open.

Why does page-anchor not work in Opera?

I got the following webpage-builtup:
<div id="menu">
</div>
<div id="content">
<!-- you just need to see the last part of the page? us this link -->
down
<!-- A LOT OF CONTENT ... no fun to scroll down -->
<!-- EVEN MORE CONTENT ... still no fun to scroll down -->
<a name="down" id="down" />
</div>
This works fine except Opera. Why is that? Does someone know a solution or am I doing something wrong?
There's nothing wrong with the code. Except maybe for the fact that you're trying to self-close a tag that isn't a self-closer. In this case, the anchor tag. Close it properly at least.
But, tested in Opera 9.64 and it's working fine.
The expected outcome of that code chunk alone is to go right down to the named link, which it does.
If you have a clashing ID that you're not showing, that's probably a reason.
Tested and working in Opera 10.0 on Windows Vista.
You must have some other problem, like a duplicate name or id, that Opera handles differently from other browsers.
Have you tried validating your HTML?
Does not work in Opera 9.5.1 as thats what I'm using and how I found the same question. Might be a bug for that version of Opera