Button and other format changes depending if site is secure or not

Odd behaviour. In safari if I access my site with http:// (insecure link) the styles for buttons and text in a list are correct but if I use the https:// secure link it reverts to the default.
In chrome it appears as it should.
Seems to be bug @Norm?
I have posted two serene shots - the one with outline on the button is correct the grey ( and larger text is not.

Did you check the error console in Safari? (right-click the page and view page source - Click on the console tab to see where the problem may be) It should look something like this:

Sometimes, if the HTTPS implementation hasn’t been done correctly, you may see an error stating that something (normally a .JS or a CSS file) was blocked from loading because it was deemed originating from an insecure location as in the message in the above image.

This could be a Safari thing, but normally if the error is showing it would be a server side thing and your choice of browser shouldn’t have any impact. Of course, it maybe that Chrome is serving up a cached version of the site whilst Safari isn’t. Check it out and let us know if there is an error.

If you do see the error it can be easily fixed by adding the following to your .HTACCESS file in the root of your domain:

Header set Content-Security-Policy: upgrade-insecure-requests

Another variation that seems to work is:

Header always set Content-Security-Policy: upgrade-insecure-requests

You should also make sure that you use the correct designation in your site settings, as illustrated below.

thanks for that advice - how would I add to the .HTACCESS file

If you open the file manager in your cPanel (hosting account) you should see a file named .HTACCESS. It’s a simple text file which you should be able to open and edit in the file manager (it usually an option that says view) If you can’t edit it directly in the file manager, download it to your computer and edit it in a plain text editor. You may have to rename it to get rid of the dot in front of the name. Once you’ve added the code, upload it back to your server and make sure the name is .htaccess. Do not change anything else that may already be in the file.

I have looked at the web page console and there are no blocked or insecure errors. Is it still possible the cPanel needs altering?

I’m not 100% sure because I don’t know if that is the issue. However, adding the code into the HTACCESS file won’t do any harm. I think you may also be able to add the code to your website header. I think I will leave that to someone’s else to comment on as I’ve never done it that way. Maybe @Malachiman will review the post and suggest something.

It will be easier for the community to help if you can post you link.


I just checked On my iPad Pro and both are the same.

I will check desktop in the morning. What I would also suggest is htaccess redirecting to ssl.

I have noticed the issue on all my devices ( phone, iPad macOS. )
Redirecting via SSL a good idea but it is the secure link which is the issue.

Everything is working fine here. Checked on iMac, iPad and mobile. In Safari and Chrome. Both versions of the site are delivering identical content. It may be a problem with browser cache that is causing you to see different versions. Try clearing your cache. Also, be sure to check the cache bust option when exporting your site. This will force the page to load every time.

1 Like

Yes a cache clear did the trick