Web page display well on all browsers except Firefox
I created a page with few dynamic widgets. The page renders well on all browsers except Firefox. Here are the results:
Win 7: IE, Chrome - fine (Firefox not fine)
Win10: Edge, Chrome - Fine (Firefox not fine)
iPhone: Chrome, Safari fine.
I am using jquery 2.11 and modernizr for one of those widgets.
All Replies (6)
Please provide a public link (no password) that we can check out. No Personal Information Please !
Hello,
In order to better assist you with your issue please provide us with a screenshot. If you need help to create a screenshot, please see How do I create a screenshot of my problem?
Once you've done this, attach the saved screenshot file to your forum post by clicking the Browse... button below the Post your reply box. This will help us to visualize the problem.
Thank you!
Thanks for the reply and interest.
here is the actual website link (thought it might be better than screen shots)
This page has two widgets. One is those little thumbnail images and if you click any one of them, it will do some animation and open up an over lay. This widgets works on all browsers including firefox.
The second widget is the internal page navigation. Depending on browser and operating system you will see little orange dots on the right (if you hover you will see internal page anchor link titles) or you might see a 1cm x 1cm square box on the bottom right corner. If you click on that box it will open up a menu overlay. That internal page navigation has issues with firefox.
To sumarize:
Win 7: IE and Chrome - Fine (Firefox not fine)
Win 10: Edge, Chrome - Fine (Firefox not fine)
iPhone Chrome, Safari - fine.
Also that navigation widget uses jquery 2.1.1 and modernizr.
HTML ERRORS - https://validator.w3.org/nu/?doc=https%3A%2F%2Ftamara999.weebly.com%2F
Firefox loves clean code as does Google Webmaster.
Seems there's an issue with one of the scripts in the page that assigns class names to the <html> tag.
In my Firefox it looks like this:
<html style="" class="ff wf-brandongrotesque-n4-active wf-brandongrotesque-i4-active wf-brandongrotesque-n9-active wf-brandongrotesque-i9-active wf-active" lang="en">
In my Chrome it looks like this:
<html lang="en" style="" class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface no-generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-brandongrotesque-n4-active wf-brandongrotesque-i9-active wf-brandongrotesque-n9-active wf-brandongrotesque-i4-active wf-active">
I bolded the one that is necessary for the menu to convert from a stack of text to the left to a stack of dots to the right. The others might be significant in other ways.
Maybe check with the template provider to see whether they know what's going on.
Thank you PKshadow and jscher2000. I see the rrors and warnings, but that is all greek to me. I have no clue on how to fix it! I am just a self taught web designer with itsy bitsy knowledge. The funny thing is it works by itself on Firefox if I get rid of the other thumbnail widget. Oh well. Thanks again
Ya, not to worry if it runs now. I only do Template stuff now as cannot write css out.
This error in HTML just remove the word type and move script to the equal sign and is fixed. <script type="text/javascript" async=1> <style type='text/css'> </script><script type="text/javascript">
I use this persons https://html5up.net/ and the link at the bottom to the buy all the stuff is really cheap so can remove the owner ship and the ping back to them when being used.
This is useful also : https://www.w3schools.com/