Take the 2-minute tour ×

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;
share|improve this question
Works for me (Firefox 3.6, OS X): what browser are you testing on? –  htw Jan 25 '10 at 9:23
@htw firefox and chrome, my <pre> code is being ran through some javascript for code syntax highlighting, maybe it is overiding my css somehow. It is weird in FIrebug it seems that the font size I have for "post" affects the font size in the <pre> tags though –  jasondavis Jan 25 '10 at 9:25
Example page? This could significantly speed up error detection ;-) –  Boldewyn Jan 25 '10 at 9:27
The pre tags are replaced by your syntax highlighter with tables. Could that be the issue? –  Boldewyn Jan 25 '10 at 10:17
add comment

3 Answers

up vote 1 down vote accepted


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

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

share|improve this answer
Thanks for the link, bookmarked good resource. This is a weird issue, after test with firefox it seems that my pre tags show the correct size on page load for a second until my syntax higlighter kicks in and then it somehow makes it use the font size if the post div. If I change the size of the post div font then the pre tags size changes as well so it is kind of a weird issue, it seems like the javascript is like reading the post div's font size and then applying that to my pre tags IDK –  jasondavis Jan 25 '10 at 9:29
add comment

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.

share|improve this answer
Yes I went over it with Firebug and found that the "post" was overiding the "pre" tag that is nested under the "post" –  jasondavis Jan 25 '10 at 9:23
I just tried this in firefox and it worked fine (3.5). –  Erik Jan 25 '10 at 9:24
add comment

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

share|improve this answer
add comment

Your Answer


