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

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
  • Save
  Internet Explorer With Proper SSL Lock


firefox locked
  • Save
    Firefox Browser With Proper SSL Lock


chrome lock
  • Save
   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
  • Save
  Internet Explorer With Broken SSL Lock


firefox not locked
  • Save
  Firefox Browser With Broken SSL Lock


chrome no lock
  • Save
   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:

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                                    

 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


Avatar of Halm


Sampson Halm is a Ghanaian blogger from Osu, Accra. He is also 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 Comment

WhatsApp chat
Share via
Copy link
Powered by Social Snap