Debugging CSS

Recently I had the task to create an info icon in a circle with pure css.

My first attempt, with a little help from the internet, gives me the following solution:

<span class="info--icon"></span>

It seems to work as expected ;-)

Image for post
Image for post

But using the icon in a different context results to the following :-(

Image for post
Image for post

What have I done wrong? How is it possible to find the problem?

Because the CSS and the HTML was identical, it could only depend on the context, where it was embedded.

So I checked the computed result styling with the Chrome developer tools. But in both cases it shows the same styles:

Image for post
Image for post
Computed styles for the pseudo class after.

But did you notice the checkbox in the right, to show all computed styles? Let’s check this. Uh, that’s a ton — see the scrollbar.

Image for post
Image for post
All computed styles for the pseudo class after.

How should I compare this efficiently?

What about file comparison using i.e. notepad++ adding the Compare plugin? Let’s try.

Image for post
Image for post
notepad++ plug-in manager

So I copied both computed styles into different text files and compare them side by side. And half the way down, I found the problem: text-align.

Image for post
Image for post

So adding the text-align style with the value center to the span solves my problem.

Comments and suggestions are welcome.

Developer since the 80'th, working at Forschungszentrum Jülich (http://www.fz-juelich.de) …

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store