Clever Geek Handbook

Finding why the text on a webpage is larger than Firebug intended

I have a text display of a larger font size than intended. I have used Firebug and it shows that the text is 12px as defined in the CSS element. However, the web developer and CSSViewer report that the text is 16px, which is currently displayed.

With all these tools, I can't quickly identify the origin of the 16px font size. It should be 12px.

What's the best way to use these tools (or others) to determine how 16px is calculated? While I can find this by walking through the cascading hierarchy, I was wondering if there is a way to get the information more easily.

+1


source to share


3 answers


When using the web developer toolkit, you can see the DOM path of an element - just see if one of the taller elements has a different font size. Firebug should show which element the style is inherited from



+1


source


If using Firebug doesn't help, I would globally search your CSS for "16px", temporarily removing that attribute and see if that helps. CSS doesn't always behave as expected, especially across different browsers. Incorrect code formatting, for example, can cause very strange behavior.



Also, check your XHTML / HTML and CSS. I found that this fixes a lot of problems at once.

0


source


Since Firebug 1.10, the Computed Sidebar allows you to expand each computed value to see a cascading hierarchy for it, making it easy to see how it was computed.

Example:

Style trace of computed value of the <code> font-size </code> <br> <script async src=
property" data-src="/img/145366abfc6a35d56eb1a1c3e28b67ba.png" class=" lazyloaded" src="https://fooobar.com//img/145366abfc6a35d56eb1a1c3e28b67ba.png">

In this example, you can see that the font size is mainly determined in the rule using the selector .wmd-preview

.

0


source






More articles:


All Articles