I've noticed that whenever I have a selector that starts with #id_name, it has the highest precedence, even if I put something lower in the CSS file that should override it. This occurs in all 3 browsers I use (IE, FF, Opera), so I'm thinking it's intentional in the standard somewhere.

Here is an example:

#main .corner{
    height: 10px;
}
.display .corner{
    height: 7px;
}

----

<div id="main">
    <!-- other markup here -->
    <div class="display">
       <div class="corner"></div>
        <!-- other markup here -->
    </div>
</div>

The <div class="corner"> will have a height of 10px instead of 7px. I know I can use !important, but I'm just curious why this occurs in my example. Does anyone have any ideas?

You're bumping into specificity as well as the cascade.

#main .corner is very specific and will over ride .display .corner every time.

http://www.htmldog.com/guides/cssadvanced/specificity/

I didn't know about the different levels of specificity, but I guess it makes sense. Thanks.

Good article on specificity using the Sith power analogy http://www.stuffandnonsense.co.uk/ar...city_wars.html.

Basically an Id trumps a class which trumps an element. Problem lies when they are combined.