Finding why a text in web page is larger than supposed to (firebug question)

Question

I have some text displaying in a larger font than what they are supposed to. I used Firebug and it shows that the text is 12px as defined in the element's css. However Web Developer toolkit and CSSViewer both report that the text is 16px which is what is currently displaying.

With all these tools I am unable to quickly determine the source of the 16px font size. It should be 12px.

What's the best way to use these tools (or others) to determine how the 16px cascaded to the text? While I can find out by going through the cascade hierarchy, I was wondering if there's a way to get the info on the spot.

Answer 1

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

Answer 2

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

Also, validate your XHTML/HTML and CSS. I found this to clear up a lot of problems right away.