from novice to ninja ;-)
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:
border: 1px solid black;
It seems to work as expected ;-)
But using the icon in a different context results to the following :-(
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:
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.
How should I compare this efficiently?
What about file comparison using i.e. notepad++ adding the Compare plugin? Let’s try.
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.
So adding the text-align style with the value center to the span solves my problem.
Comments and suggestions are welcome.