Compatibility issues between browsers

[gregjb]

Having 2 separate issues with website compatibility. The site http://basso56.com is working perfectly in Safari. In Chrome the homepage plugin does not run. In Firefox the fonts do not load. 

I'm hoping someone is familiar with these issues as I'm not a pro, just helping a friend out.

Thank you in advance!

[Jon Fritz]

I'm not seeing an issue with your slideshow, it runs in all browsers for me. Chrome has a notoriously sticky cache which could cause issues with the way your page displays there. Open Chrome's Dev Tools (F12), click Network and check Disable Cache, then reload your page to verify you're seeing the most recent version.

Validate and clean up any errors reported here: http://validator.w3.org/nu HTML errors can cause all kinds of rendering issues and various browsers deal with them differently. some are better at guessing what you meant when they run into problems.

You're not using CSS fonts, so the devices used to access your site will need the Gotham font installed in order to see it. I don't have Gotham, so I only see Helvetica Neue throughout your page, the second font in your font-family stack. That may be the issue with the device you're using to access with Firefox, if it's not a cache issue there as well.

[gregjb]

Thanks, but I still have the problems after disabling cache. Here is what it looks like. How about the "failed to load response data..." Could that be the issue. 
Also not working on safari on a PC. 
Were there browser updates that could have caused the issue?
Appreciate your help!

[Jon Fritz · Accepted solution]

Safari for Windows is dead. Apple discontinued it in 2012, it should not be used to as a resource to render modern sites.

Looks like your browser settings are stopping one or more of your scripts from running. You have a mix of secure and non secure links to your jquery.min.js file and your jquery cycle file. The red highlighting of the min.js usually means it wasn't loaded. Typically, you want all http or https. 

My browser is set to be more forgiving and loads the insecure http min.js file, but you should not assume your viewers are as lax with their settings.

On line 59 of your code, change the http to https and it may snap back in place for you like it does for me. Here's how I am seeing it in Chrome...

[gregjb]

Thank you, that seems to have fixed the slideshow issue. Much appreciated!

[gregjb]

[Nancy OShea]

1) The server is not resolving to secure HTTPS.  See screenshot.

In the absence of SSL/TLS certificates, the domain looks suspicious to potential customers.  You need to redirect ALL incoming traffic to the secure HTTPS server which is currently covered by Let's Encrypt certs. 

2)  See Why No Padlock Test Results:

https://www.whynopadlock.com/results/8d8a937b-a83a-4800-acd1-aa1f4c3eaeb1

3) In addition to Mixed Content,  the site is using Edge Web Fonts.

"http://use.edgefonts.net/didact-gothic:n4:default;josefin-sans:n4,n1,n3:default;poiret-one:n4:defau...

Edge is being discontinued very soon.  https://community.adobe.com/t5/dreamweaver-discussions/edge-web-font-services-will-be-unavailable-in... 

Replace Edge Fonts with comparable typography from Adobe Fonts or Google Web Fonts.

Hope that helps.

[gregjb]

Thank you! Very helpful.

[gregjb]

A question regarding this same site...
Just saw that on a mobile device, or a very narrow window, the line breaks are not creating new lines but rather running back from the beginning of the same line. Is there CSS to fix this or is my text formatting causing the issue? Thank you!
https://basso56.com/index.html

[Nancy OShea]

.menu h3 {
color: #676027;
font-weight: 400;
text-transform: uppercase;
font-size: 1em;
letter-spacing: .1em;
line-height: 2em;
text-align: left;
padding-top: 1em;

}

[gregjb]

This works if I shrink my desktop window, but mobile is still off.  See attached.

[Nancy OShea]

Looks like cached data.  Clear cached data & history from your mobile browser.

https://support.apple.com/en-us/HT201265

[gregjb]

I cleared the cached data and history and waited quite a few hours, still having the problem on safari on my iphone.

[gregjb]

hi Nancy,

Just wondering if you have any other solutiions here. Appreciate the help!

[osgood_]

hi Nancy,

Just wondering if you have any other solutiions here. Appreciate the help!

By @gregjb

Menu text looks fine to me on Android tablet.

[gregjb]

The h3 text still runs into itself on safari on iphone?

[Nancy OShea · Accepted solution]

#1 Remove all line-height values from the entire style.css file and upload it to the css folder on your remote server.

#2 Also, I just realized you have TWO websites.  The default domain is redirecting to a duplicate mobile version on 700px or smaller devices.  I hope you realize this is bad practice for SEO.  Google frowns on duplicate content. It also makes site updates very difficult because you're having to maintain TWO sites instead of one for ALL devices.

https://basso56.com/dinner.html

http://www.basso56.com/mobile/#dinner

CSS FILES

Desktop:

https://basso56.com/boilerplate.css

https://basso56.com/css/style.css

Mobile:

jquery-mobile/jquery.mobile-1.3.0.min.css
jQueryAssets/jquery.ui.core.min.css
jQueryAssets/jquery.ui.theme.min.css
jQueryAssets/jquery.ui.button.min.css

I urge the site owner to build a new site ASAP!  The old Muse generated site(s) are untenable.

[gregjb]

Appreciate your help! Yes this site is old and is just temporarily acting as a bridge to a new one. I will make these changes and hopefully that will solve the current issue. Thank you!

[gregjb]

That worked! Text issue fixed. 
I looked at the duplicate site issue. When I visit the site on mobile it is the same link as the desktop and not hasthtag version http://www.basso56.com/mobile/#dinner that you posted. And when I make the changes to the site I am only updating one site, not duplicate sites...and those changes are reflected on the mobile site. 
During the initial site development years ago I remember an attempt to set up a separate mobile site that did not come to fruition. Could it be that those files still exist on the server but are not currently active. Can they just be removed? and the code in the html removed as well to solve the issue?

[Nancy OShea]

The mobile site's files are on your server, whether or not you're using them.

<!--
Mobile Detection/Redirection
 -->
 <!--

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "www.basso56.com/mobile";
}</script>
//-->

[osgood_]

The h3 text still runs into itself on safari on iphone?

By @gregjb

Its NOT the h3 text that is the problem it's the h4 text - the problem is you have set line-height to 0em (see in bold below).

.menu h4{
line-height: 0em;
letter-spacing: .0em;
margin-top:1%;
margin-bottom:1%;
}

Either remove it or set a larger line-height like 1.5em.