I've been working on a revamp of the charity site I'm the webmaster for, heroinitiative.org. It is located here:
http://www.heroinitiative.org/revamp/default.html
(and no it's not live code, it sits alongside the live site just so I can show progress to my boss, it's not really important to keep it under wraps, which is why I can post it here)
My problem: For some reason all links in the footer (from id "bodyfooter" on down, including anything I put below the "Partners/Thanks" footer) have been disabled. I don't know why this is happening as I've thoroughly reviewed the code.
It happens in:
Firefox 3.6.8
Chrome 5.0.375.127 & 6.0.472.53 (just upgraded as I typed this)
but not in:
IE 8.0.7600.16385 (or in it's compatibility mode)
you have a z-index:-1 on #bodyfooter. main.css line 182
remove this or change it to 0.
Your page takes a long time to display in Safari on my Mac.
Whenever I have a page that does not render as I expect, I run it through the W3C Markup Validation Service.
Try fixing the errors displayed here:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.heroinitiative.org%2Frevamp%2Fdefault.html&charset=%28detect+automatically%29&doctype=Inline&group=0
Related
TL;DR
How/why are some browsers able to search and highlight text in the HTML body which is followed by #:~:text= in the URL?
Explanation
One day I was searching for something on Google, which lead me to Quora's result. I observed that 2 sentences were highlighted in yellow, which were part of URL after the aforementioned parameter. I thought this would be Quora's feature for SEO or something, however, also found this on Linkedin, and Medium, and so on.
I'd like to know:
What is this highlighting called? Why/how does it work?
This seems to be browser-specific. What kind of browsers support this?
It seems to work on Chrome and Edge; but not on Firefox, Safari, and IE.
Does a frontend programmer need to incorporate something in the code to have search engines highlight content on their web-pages? (Based on the assumption that search engines actually appends the relevant string predicted by user's query)
The highlighting is called Text Fragments. Its a new feature that was recently added to Chrome 80. It works by specifying a text snippet in the URL hash.
Yes it is browser specific.
No, the experience that you get when clicking on a link from Google's search results is part of Featured Snippets which are algorithmically determined. There is nothing you can incorporate into your code to prompt search engines to highlight text on your page.
There is no markup needed by webmasters. This happens automatically,
using Scroll To Text for HTML pages
https://chromestatus.com/feature/4733392803332096. See also more
background here: https://support.google.com/webmasters/answer/6229325
Sources:
https://web.dev/text-fragments/
https://www.theverge.com/2020/6/4/21280115/google-search-engine-yellow-highlight-featured-snippet-anchor-text
https://www.theverge.com/2020/6/18/21295300/google-link-to-text-fragment-chrome-extension-chromium-highlight-scroll-down
https://searchengineland.com/google-launches-featured-snippet-to-web-page-content-highlight-feature-335511
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html
While text fragments is natively implemented only in latest Google Chrome (and the latest versions of Chromium-based browsers, such as the new Microsoft Edge), there is a browser extension/add-on that seems to enable it on Firefox and Safari: https://github.com/GoogleChromeLabs/link-to-text-fragment
It appears to use #ref-for-fragment-directive:~:text= and additional arguments (instead of just simple #:~:text=).
Firefox: https://addons.mozilla.org/firefox/addon/link-to-text-fragment/
Safari: https://apps.apple.com/app/link-to-text-fragment/id1532224396
Curiously enough, the extension has also been made available for Chrome and Edge too (!).
.
UPDATE: I'm testing it on Firefox Developer Edition, and it doesn't work for me.
First off, I know this is an extremely narrow edge case, but in the interest of due diligence with a client, I have to ask. Consider everyone's favorite no-frills HTML tutorial site, W3Schools.com, specifically their demo page on HTML select boxes: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2
Open that page up in Safari on OS X (may exist in Windows, but honestly, who uses Safari for Windows?) and zoom in four times. Open up the select box. See where the normal check mark has changed to two dots?
I'm perfectly content to call that a Safari bug and close it as cantfix. Googling "safari html select two dots" doesn't get me anywhere. Is this fixable?
I am trying to make a website for my family's B&B and I don't have much experience with web coding.
This is a website template I bought from the internet, and I didn't have that many difficulties with it until now where I find myself completely stuck to a point where the contents of a specific webpage of the website are not displayed correctly across Chrome Firefox and Internet Explorer, mostly the problem is with IE since the viewing issues between Firefox and Chrome are close to none.
I was told on IRC that this is caused by the CSS not being read correctly from the browsers and that every browsers tend to view pages differently, and therefore I should create a specific css style for IE in order to address this compatibility issue.
Unfortunately though I haven't been able to find out what is causing the issue.
The "container" where those contents (just pictures and texts) are located in the page is called grid_11 and belongs to the grid.css file located in the css folder.
I tried to play with margin, something like
.container_24 .grid_11 {
width:430px;
margin-left: 40px
}
but the result is that the box containing all the contents moves throughout the page along with them.
Here I am at attaching the screenshots of how the page is displayed across the three browsers.
http://imgur.com/mgDYbD3,bZC3wHI,yd6BX8t
And here's the html code alongside with the css http://jsfiddle.net/r5QHW/
This is really getting above my pay grade now. I'd truly appreciate if someone could help me out with it.
Thanks,
Pietro
The question you want answered is one of the below... good luck!
Where is there a list of css property support by browser?
W3schools has lots of ads but is a good resource.
The CSS property support table: http://www.w3schools.com/cssref/css3_browsersupport.asp
The list of all references on their site: http://www.w3schools.com/sitemap/sitemap_references.asp
How do I debug code in a specific browser?
What you want is the Developer Tools. You actually open the page in the browser you're evaluating and then follow the instructions for each browser's developer tools to figure out what broke.
Chrome: https://developer.chrome.com/devtools/index
Firefox: https://developer.mozilla.org/en-US/docs/Tools
IE: http://msdn.microsoft.com/en-us/library/dd565628%28VS.85%29.aspx
Ok, this is weird and I'm not sure how to resolve it.
I am the creator of LogZilla (a syslog management/reporting tool).
One of my users has pointed out a bug that only exists in IE9. IE 8 and below has never worked properly so I can live with that. But IE9 should be working. FWIW, I am running IE10 and it works. But if I put it in IE9 mode it doesn't.
If you visit my demo server and do a search (just click the search button at the bottom of the page after logging in), you can see that the data is presented properly using Chrome and FF and IE10, but if you use IE9 it says there is no data to display.
I've also noticed that if you use a GET instead of a POST it works properly. The results page after a search has a small disk icon at the top right - if you click that you can get the full URL to paste as a GET.
I'm wondering if the problem is this which led me to this, but I have tried loading json2.js in the header and it doesn't fix anything (maybe I did it wrong?)
Edit: I also though Modernizr might help, but I have no clue how to implement it, and the download page is insanely confusing - which options do I need?
Edit: Based on #thatidiotguy's comment, I checked my source and it is actually using a GET, not a POST. So now I'm even more confused as to why pasting the url works when clicking the button from the main page doesn't?
The page displays fine in the following:
Chrome 21 on OSX
FireFox 14 on OSX
Internet Explorer 8 on Windows XP VM (with Compatibility Mode turned off)
However, the page only displays the header background in Internet Explorer 9 (Windows 7 VM). Any ideas? The website is located here temporarily.
EDIT~ All the sub-pages are loading fine in IE9...only the homepage refuses to load. Here is a link to a subpage.
EDIT 2~ I am beginning to believe this is a server problem. We are running an IIS7 server. For 50% of the day, the site works wonderfully on all browsers. Then for the other 50% of the day, IE8-9 will not display properly UNLESS you attach index.php at the end of the URL or https:// at the beginning. Any advice? I'm thinking of starting a new topic to gain more attention but I also don't want to upset the stackoverflow community.
EDIT 3~ Turned out it wasn't a server issue (or maybe it was, but I fixed it on my end). WP Super Cache was the culprit. Once that plugin was disabled, problem was solved!
I have inspected the DOM, and it looks like IE9 renders the page up til this piece of javascript:
<!-- function clickIE4(){ ...
That's an opening comment tag which is never closed.
See the two screenshots:
This is the output of IE9 developer tools, the page is rendered only until the opening script tag that includes the above code.
The chrome developer tools output looks like this. I guess that its parsing engine automatically closes the opening HTML comment once a closing </script> tag follows.
you need to make block level element of the html5 tags:
article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
You have quite a few html errors on the page. Fixing these may help. In particular you have a closing P tag with no opening P tag and you have a STYLE tag within the BODY. style tag should only be used within the HEAD.
After trying nearly every answer posted here, nothing seemed to be working. So I decided to disable/re-enable all my plugins just to see if one of them was the cause...turned out WP Super Cache was the culprit. Once this was disabled, the page has worked since! Not exactly sure why, but I felt this needed to be posted incase anyone else has a similar problem.