Question

I have this CSS declaration:

.columns {
    width: 950px;
    font-family: verdana, arial;
    font-weight: normal;
    font-size: 13px;
    line-height: 21px;
    text-align: justify;
    color: #000000;
    margin: 0px auto 0px auto;
}
.newsfeed .description {
    font-size: 11px;
    line-height: 14px!important;
}

newsfeed description is a div inside the columns div.

The problem is I can’t seem to overwrite the line-height value of 21px to 14px.. I noticed this problem recently and it seems that it applies to paddings as well.

So, font-size, color etc. are overwritten, but not paddings and line-height (at least that’s what I know of).

Where do you think might be the problem?

Thanks!

— EDIT —

Ok, I found my problem.

1. description was a span inside a div, so the problem is not the selector.
2. The values were inherited correctly according to chrome’s developer tools.
3. The actual problem was that I did not know it wasn’t possible to change the line-height of a inline element (such as the span I was using). I’ve changed the display of the span to block and it worked wonderfuly.

Thanks to everybody!

Answer 1

You describe newsfeed description as being “a div” (singular). If you really mean that, and it is defined <div class="newsfeed description"> then you’re using the wrong selector, as .newsfeed .description would select only “description” class elements inside “newsfeed” class elements.

If that was the issue, you wouldn’t be able to target that element with any of the rules in that selector. (Easy way to test… Add display: none; to the rules and see if the element disappears.)