Anchor links not working in IE11 - html

I've been searching on here for a solution for the past few days, and despite finding a couple of related articles, unfortunately they were for older version of IE & hence the fixes didn't work :(
On this site http://zenyx.com/ the navigation links have been setup to use section IDs. They work perfectly on Chrome & Firefox but only seem to work on IE11 if the page is manually refreshed after the link has been clicked. Is there any way to fix this so that a manual refresh isn't required for the links to work properly in IE11?
Cheers

Not sure if you still need this answered but for anyone else having this issue with IE 11 here is the fix that worked for me.
I had a button at the top of the page to link to a giving form further down.
<button>Give Now</button>
<div id="giving-form">{{insert form here}}</div>
however it didn't work in IE 11. The reason is that the button element blocks the click event from triggering the tag. So easy fix it to wrap your button element inside of your a tag.
<button>Give Now</button>
<div id="giving-form">{{insert form here}}</div>

Related

Certain link not opening in Internet Explorer 11

I've created a new html page and all other links are opening fine except the one directing to this page. Clicking the link in Internet Explorer simply does nothing, but if I open the file directly it opens it. No problems in Chrome whatsover.
What's happening here?
<a class="m04" href="cariere.html"><strong>CARIERE</strong></a>
Thanks
EDIT I think the issue is with the page itself, what could make IE refuse to open a page?
EDIT2 OK, here's cariere.html:
`Content removed`
EDIT3 Problem solved, I did a rollback while saving the changes I made and now everything is navigating correctly. Still, very strange even for IE.
You're not getting errors, IE is opening other links, and it works fine in Chrome... First glance, this sounds like an issue with the way that IE cached your website. However, I can't elaborate on further possibilities because you didn't provide us with much information or any code to investigate, so basic troubleshooting is the best answer as of right now. I'll update it again if you provide more information.
Try this:
Tools(gear/cog)->Internet Options
Browsing history (general tab)->Delete
You'll want to check the Temporary Internet Files and website files,
Cookies and website data. Uncheck "Preserve Favorites website data."
Then click 'Delete' at the bottom.
Click the 'Security' tab and at the bottom click 'Default level'
Click the 'Privacy' tab and click 'Default'
Test it. If the above doesn't work, you can always click the 'Advanced' tab and click the 'Reset' button. I've seen IE do stranger things, so hopefully it's as simple as this.
As mentioned, you didn't provide us with much to work with. We're all happy to help you out, so if this doesn't work for you, please come back and post us more information/code so we can get this pinpointed. There are many things, code wise, that can cause undesired results, but we can't confirm that without seeing the code.
This has helped me out with various strange "IE bugs." I can't provide you with an explanation, but I'm sure a search could shine further light on this. It's at least worth trying considering how strange this bug is.
In your <head> put:
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
I ran into the problem before, and it's a very weird one: it works fine in Firefox and Chrome, but it's not stable in IE. Sometimes it works, but in most time it just won't work.
The problem is that a label tag is imbedded in the a tag, the link works only in the padding area between label tag and a tag. It can be easily fixed by change the lable tag into span tag.
From:
<label>Learn More</label>
To:
<span>Learn More</span>

HTML form only works in Chrome after browser refresh

I'm working on an existing Rails application using Turbolinks.
I have a plans page with upgrade/downgrade functionality. When this page is visited from another page and a button is clicked to upgrade nothing happens, although when I refresh my browser it seems to work fine and posts the form.
The strange thing is that other buttons work fine with Turbolinks installed and it only seems to happen in Chrome. Firefox, Opera and Safari it works fine.
Has anyone encountered this problem before? I've searched through Google all morning but can't seem to find a resolution.
It seems like it's a problem with Google Chrome. I've fixed it by putting the attribute data-no-turbolink in the HTML on the link that goes to the page in question.
Now, when I go to the page via clicking on the link it doesn't use Turbolinks and makes a full refresh of the page.
To just target Chrome (as it seems to work in other browsers) you could use this piece of js:
if ($.browser.webkit) {
$("your-css-selector").attr('data-no-turbolink', true);
}
Could be seen as a bit of a hack, but it works.

Hashlink is not working in Safari

While using haslink (#testhash) is not working on Safari. I am really unable to locate the problem.
Here is the following code I am providing below
Click here to go to Hash
<div style="height:500px"> </div>
<div id="testhash"></div>
<div>............Test Data............</div>
When I am clicking on the link, it is got going to proper place on Safari but it is working fine on Google Chrome, Mozila Firefox and IE9. In Safari the link is redirect to the site http://example.com/ instead http://example.com/#testhash after URL rewritting. The funny thing is when I am directly putting the link http://example.com/#testhash on the address bar of Safari, it is working fine but the time of clicking it is not working and also when I am writting http://example.com/?page_id=112#testhash, it is giving problem.
You may do one thing. Give the full link instead of ?page_id because sometime Safari or some other browsers write different rewrite rules for Wordpress and thats why Hashlinks doesn't work. You may put
Click here to go to Hash
instead of
Click here to go to Hash and it may work.
*I meant by Rewritten page as the browser divides the page by parents and children like about-us/page/etc so the url should be from my example http://testwordpress.com/about-us/page/etc/#testhash
Can you change the href to just "#testhash" and see if that fixes your problem?
Editing my answer as it wasn't clear:
Try this:
Click here to go to Hash
<div style="height:1200px"> </div>
<a name="testhash" />
<div id="testhash"></div>

really bizarre bug in my html - not focusing on nav links with tab key press / duplicating elements

for reasons unknown my html is causing all browsers, except firefox and ie, to skip over the links in the nav element when using the tab key, doesn't focus on them at all. firefox does something equally bizarre but different, it doesn't skip the links, instead it duplicates the header link and places the h1 element out of the link within the header. and with ie it works spot on perfect... yeah i know... (woah!)
i've narrowed it down to being a problem within my html because it still happens with both javascript and css disabled. i haven't yet included a skip to main content link so it can't be that, i haven't used the tabindex attribute anywhere and it all validates perfectly fine.
here's the problem to see for yourselves - www.thisbengreenguy.com/creative.php
thanks for all your help in advance.
by converting it backwards from html 5 to xhtml strict i've got it looking right in firefox and working perfectly in opera as well as ie now. and with safari and chrome you have to use opt/alt + tab to focus. at least it looks as intended and is as close to completely accessible as i can get it.

Gecko(Firefox 3.6/4beta) Hides Div While Webkit(Chrome/Dreamweaver) Displays Just Fine

I've ran into a snag I've been working on for a couple days and can't seem to come up with an answer online. The site template I'm working on now is located at "http://citylakersbaseball.org/2.0" - I've got a div named "sponsors" that shows up fine in Chrome and the built in Live View of Dreamweaver CS5 - however, in Firefox 3.6 & 4beta it completely vanishes. I can see it in the view source, yet firebug has it grayed out. Maybe it's a DOM issue? (for which I don't know much about). Rendering engine issue?
I ran the source (index,htm) and CSS (style.css/nav.css) through the HTML validator - HTML is fine, and the CSS didn't spit back anything I would think could effect the div's display, especially since Webkit has no issues with it.
Any thoughts would be appreciated. Thanks in advance!
Your ad-blocking Firefox plugin is detecting and removing the div from the DOM. I experienced the same behaviour in Chrome and Firefox (which have ad-blocking plugins/extensions), but not in Safari or IE (which don't); and, indeed, the div appears if I disable Adblock Plus. One of the more basic rules Adblock Plus and the like follow is to look for HTML elements with class="sponsors" or id="sponsors" and remove them.