X
Tap here to go to the mobile version of the site.

Support Forum

Web page display well on all browsers except Firefox

Posted

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.

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.

Additional System Details

Installed Plug-ins

  • Shockwave Flash 30.0 r0

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0

More Information

FredMcD
  • Top 10 Contributor
4269 solutions 59855 answers

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!

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!

Question owner

Thanks for the reply and interest.

here is the actual website link (thought it might be better than screen shots)

https://tamara999.weebly.com/

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.

Thanks for the reply and interest. here is the actual website link (thought it might be better than screen shots) https://tamara999.weebly.com/ 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.
Shadow110 1072 solutions 14836 answers

Helpful Reply

HTML ERRORS - https://validator.w3.org/nu/?doc=https%3A%2F%2Ftamara999.weebly.com%2F CSS ERRORS - https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Ftamara999.weebly.com%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en Firefox loves clean code as does Google Webmaster.
jscher2000
  • Top 10 Contributor
8792 solutions 71898 answers

Helpful Reply

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.

Seems there's an issue with one of the scripts in the page that assigns class names to the &lt;html> tag. In my Firefox it looks like this: &lt;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: &lt;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.

Question owner

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

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
Shadow110 1072 solutions 14836 answers

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/

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/