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>
Related
The fa-sticky-note-o icon is not being displayed in
<em class="fa fa-sticky-note-o" aria-hidden="true"></em> on my Chromebook, which is current. Other icons, such as <em class="fa fa-desktop" aria-hidden="true"></em> are displayed. It does appear when expressed as Unfortunately, this is a major documentary feature on https://marlinfw.org/docs/configuration/configuration.html I doubt that they are going to want to code their page differently just for my benefit. :)
I looked at the source of the Marlin document when it became evident that something was missing. I checked the FontAwesome cheatsheet https://fontawesome.com/v4/cheatsheet/ and see that it is displayed when expressed as I was hoping to find how to update or define the icon, but didn't find anything that told me how to do that. I see that "/assets/stylesheets/fontawesome.min.css" is part of the of the head.load javascript at top of the page. Could that be corrupted somehow? How would I force a reload?
Your fontawsome.min.css file appears to be missing a class definition for .fa-note-stick-o.
You'll want to add the following class definition(s) to it:
.fa-note-sticky-o:before,.fa-sticky-note-o:before{
content:"\f24a"
}
I just have my number on my website with an image above it acting as a link so mobile users just click it and call me. I was checking my site through a few browsers and Microsoft Edge underlines the phone number and changes the color to blue to show that it is a hyperlink. It continues to do so even after declaring the text-decoration to none.
For the sake of not broadcasting my phone number on a site that gets a lot of traffic, I do not want to provide the link to my website. I can however show the piece of code with a fake number:
<div class="col-6"> <!-- NOTE: Phone -->
<img src="images/phone.png" alt="Phone" usemap="#phone">
<map name="phone" id="phone">
<area shape="circle" coords="64,64,64" href="tel:5555555555" alt="Phone">
</map>
<h3 style="text-align:center;text-decoration:none;">555.555.5555</h3>
</div>
I appreciate any and all feedback as I am relatively new and self taught, so please excuse any code that may seem to be set up oddly.
Ran into the same problem. It's not supported in Edge according to caniuse.com.
https://caniuse.com/#search=text-decoration
You can enable/disable phone number detection in IE all together using the following meta tag
<meta name="format-detection" content="telephone=no"/>
or you can disable it for individual elements by using the following attribute
x-ms-format-detection="none"
As for removing the style like you asked in your question, you sorta can't override it with text-decoration. Although what you can do is style the link after removing the faux underline placed there by the browser.
My html anchor tags work in chrome and IE but in Firefox, Safari, iPad and iPhone they do not work, how come? and what can I do to fix it?
Underpinning
Any help would be appreciated.
Thanks.
This is what I am trying to link it to on the services page:
<h1 id="#underpinning" name="underpinning">Underpinning</h1>
This is where I left off:
This is my link:
<li><h2 id="underpinning">Underpinning<a href="services#underpinning"><img class="alignnone size-full wp-image-127" alt="home" src="http://powellgroupconstruction.com/wp-content/uploads/2013/12/home.jpg" width="500" height="337"></h2></a></li>
This is where on my services page I want the link to goto:
<a name="underpinning"><h1 id="underpinning" name="underpinning">Underpinning</h1></a>
If I goto the url directly: http://powellgroupconstruction.com/services/#underpinning into safari or firefox, it works.
There are several issues in your code.
On your example website you're using HTML5 Doctype, so I'm just answering respectively with HTML5 in mind:
Forget about name attribute in general and <a name> markup as link target in particular. As the HTML5 Candidate Recommendation spec states: "An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS." That means, you can use any id as a link target.
As Itay Gal has already stated in his answer, don't use the same id more than once. From the HTML5 spec again: "The id attribute specifies its element's unique identifier (ID)".That said, change your current code: <a id="underpinning" name="underpinning"><h1 id="underpinning" name="underpinning">Underpinning</h1></a> to <h1 id="underpinning">Underpinning</h1>
You're using as link address currently /services#underpinning. As you're going with the WordPress rewrite functionality, entering http://powellgroupconstruction.com/services gets redirected to http://powellgroupconstruction.com/services/.Therefore you should better put a slash at the end of your pages' names, so the link address should be Underpinning
You are using the same id in multiple elements. The id needs to be unique, make sure you use each id only once and it should work.
Are href for both h2 and img tags are same? then have you tried this one:
<a href="services#underpinning">
<h2 id="underpinning">Underpinning
<a href="services#underpinning"><img class="alignnone size-full wp-image-127" alt="home" src="http://powellgroupconstruction.com/wp-content/uploads/2013/12/home.jpg" width="500" height="337">
</a></h2>
</a>
I had an issue very similar to this. I believe your problem is that Firefox and Safari do not like an <h2> tag inside an anchor <a> tag. Try :
<span id="underpinning">Underpinning</span>
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.
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+