How to size this text with css?

Question

I am having some trouble with a font size with CSS. Below you see I have .post I have < pre > tags that are nested inside of the post class so should the css I have for the pre tags work below? It is not working but I can't figure out why? The text inside my pre tags end up being 15px instead of 12px

.post {
    width: 100%;
    clear: both;
    padding: 10px 0;
    border-bottom: #CBCBCB 1px solid;
    background: url(images/post_element.gif) no-repeat 126px 21px;
    font-family: arial;
    font-size: 15px;
}

.post pre{
    font-size: 12px;
}

Answer 1

In a vacuum, that code should work. However, base tag styling can vary browser-to-browser and <pre> tends to be a bit of an odd one. My first thought is that some other style is overriding it.

Have you used Firebug (or some other developer console) to take a look at the styles being applied and the computed style for the element? That should put you on the right track.

Answer 2

http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

.post pre{
  font-size: 12px !important;
}

Should work, but to answer your questing we need to view all html + css because it really depends...

Answer 3

This was a weird issue, I had to end up changing the class and font size for all the other text, everything except the pre tags to get it to finally quit resizing after page load from my JS syntax highlighter