Wordpress

How To Solve Problem With SSL Not Displaying Properly On Web Browsers

ssl-not-displaying-properly

An SSL certificate is very vital for every website when it comes to security in the sense that it creates a connection which is encrypted to the server to protect data from being stolen. Most of the time, SSL is used for parts of a website which uses sensitive information. Eg. Shopping cart checkout.

How A Properly Setup SSL Should Look Like

A working SSL displays differently based on the browser been used. If you look at the address bar located at the top of the browser, you should see a small padlock icon in the address bar area. Below is how a properly setup SSL should look like on different browsers with different websites:

Internet explorer lock  Internet Explorer With Proper SSL Lock

 

firefox locked    Firefox Browser With Proper SSL Lock

 

chrome lock   Chrome Browser With Proper SSL Lock

 

How A Broken SSL Certificate Will Look Like

Sometimes, you notice that the SSL Lock disappears or becomes grey. For example, Firefox displays the exclamation
point while Chrome displays the Yellow triangle. Below is how a broken SSL will look like on different browsers:

internet explorer no lock  Internet Explorer With Broken SSL Lock

 

firefox not locked  Firefox Browser With Broken SSL Lock

 

chrome no lock   Chrome Browser With Broken SSL Lock

Reason Why Your SSL Not Displaying Properly:

We easily blame our web host for improperly installing the SSL Certificate on our servers but that should not always be the case. Your SSL lock will disappear when you link items of your pages insecurely. Even if one of your link is insecure, the SSL will break, meaning it will display grey. Most of the time, the cause is by using absolute links for images as well as text links in your pages instead of relative links.That brings our question to what Absolute and Relative links are.

What Are Absolute Links:

These links or addresses basically take the following form:

protocol://domain/path
Where protocol usually contains https:// or http://
The domain is your website’s name.  The path basically contains the directory and file information. In short, Absolute links contain your entire protocol, domain and path. Most of the time, absolute links are used when linking to a location on another website. For instance, the absolute link of halmblog’s About Us page will be https://www.halmblog.com/about-us

What Are Relative Links:

Relative links do not contain protocol and domain name but only the path. For instance                                    

/home/article/how-to-blog
 Relative links are used when linking to pages or files within your website. So you may ask, how does the Browser know where to take a user to after clicking on a Relative Link? The simple answer is that it will look for the location of the file relative to where the link appears in the page. That’s where the name comes from. You can read more about Absolute and Relative Links.

How To Fix SSL Not Displaying Properly:

As i stated in the article, the cause for the lock not displaying or showing grey is entirely due to having absolute links in your code. Simply checking the code for the links is what you will need to do. If you also prefer to have a list to everything that is wrong, you can enter your domain name at whynopadloock which will give you a list of every error found.

In short, if your image or text links use absolute linking with http://, make sure you change them to https:// otherwise the SSL will not display correctly. If you have any question, just raise up your hand and i will call you.

Alternatively you can watch this video to solve the problem

Did you enjoy this?
Watsapp Halmblog.com today on +1-323-643-3164 and receive Free Events, Videos and Music updates in your inbox. We are having technical issues on Email
I agree to have my personal information transfered to MailChimp ( more information )

About

Halm

As the Founder and CEO of Halmblog.com, Sampson Halm is a knowledgeable authority in web design, web development, and Motion Graphics. Learn more about Halm's history and experience, and connect with him on Facebook and Twitter.

LEAVE A REPLY

WhatsApp chat