Weebly editor - Issue with links to inpage # anchors - only with Chrome and IE

Question

Hi all,

I have been working on this website here through the Weebly editor. I studied Web Development 10 years ago and have only been getting back into it for this job, hence the use of Weebly, hoping to make things easier for myself and for my employer to take over the site when everything is working well. I have been having a problem with links not performing correctly in Chrome and Edge, working fine in Firefox and Safari. I have been looking for the past 3 days now and tried a whole bunch of things without success.

I have built pages more like the main menus being one page and the submenus links to anchors within that page.

With the way Weebly works, I didn't see a way of adding an "id" attribute to any "Title" or "Text" element you use to struture your content. So I started with the fallowing sample code, interjected where needed:

<a name="anchor-name"></a>

I was just placing an "embed HTML" element a little above where I wanted the link to land to compensate for the menu always being at the top. This simple solution works fine with Firefox and Safari. But for some reason, with Microsoft Edge does not take me to the anchor, just stays at the top of page; using Chrome, it doesn't work properly when opening the link from an outside source, link from email or doing a right click and "open link in new tab", it jumps further than intented but works fine once you're on the site and go through the different sub-menus. Very puzzling...

In my research, I came across people with similar problems, never really the same. But I tried this more elegant way, creating a CSS class with the negative top to compensate for menu and changing display to "inline-block", some saying it corrected there problem with IE. No luck for me, Firefox still working fine though.

.nav-anchor{
  display: inline-block;
  position: relative;
  top: -150px;
  visibility: hidden;
}

I came also across someone saying to check for errors with the W3.org validator, see result here. The first error is :

Error: X-UA-Compatible HTTP header must have the value IE=edge, was IE=edge,chrome=1.

I couldn't figure out how or where to change that, I looked through the Weebly editor > Theme editor in all the files and didn't see it anywhere. So not sure if I can add it someplace, or if the Weebly just includes that part for you. Any idea if that's is on the path of solving my problem?

I haven't taken the time to go through all the errors, can the errors make the links not perform correctly?

The answer here (thank you Jeffrey Kastner) did help some what with Chrome, Right-click > "Open in new tab" on a submenu link now sometimes takes me to the right spot, sometimes jumps too far down. I tried over and over with the same link, seemed random. I haven't got feedback from client using IE.

Thank you in advance for any help

(edit:greetings and thank you note disappeared on first post for some reason)

Answer 1

The short answer for your question is you'll want to add meta tags with those in your site's theme within the various types of header template files.

In the majority of themes I have seen used on sites at Weebly, the following "Header Type" files are in the theme editor, and you would need to add the following to each of those as children to the head tag:

• header.html
• no-header.html
• splash.html

(of course, your list may be different depending upon the theme you're using on your site).

The meta-tag HTML code you need to include as a child to your head tag would be:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

The chrome=1 part is usually no longer required since the Chrome-frame was discontinued in 2014, but many people still include it as part. What is happening is you're instructing Internet Explorer to operate in "standards" (the latest rendering engine). The full answer to what this tag does with this setting is available in more comprehensible detail in this stackoverflow question.

I'm not sure if this will completely resolve the issue of your links not operating as expected, since there are many things which can intercept or interrupt the event bubbling process which occurs such as: javascript, frameworks, CSS issues, and many more things. If you were to provide some more concrete information and code examples with errors about what you're seeing, I might be able to help further.

Also, you may want to search in the Weebly Help Center and Knowledgebase, consider asking this question in the Weebly Developer Community or for a more personal engagement, by creating a Weebly Support Case.