I’m having a problem figuring out why the ordering in my CSS classes a not working. If I’m not mistaken, the further down a class is in the style sheet the higher priority it will be given over the other classes. Am I wrong?
Well my problem class is .gap-20px in misc2.css:
(Split up because I don’t want this site google linked from here)
When I check it in Firebug, I see .raise_picture p us getting a higher priority. Is this maybe something to do with the .gap-20px class being dynamically added by my jquery code?
Another issue I’m having on the same site is with the image on this page:
The image looks like its missing a strip on the right because of a "margin-left: -15px" rule. The rule should be overridden by a property in ".raise_picture img.size-full" in misc2.css. But even though misc2.css comes after layout.css, the rule in layout.css wants to take over.
Your problem is specificity, an id is more powerful than a class so in your image example #main p img takes precedence over .raise_picture img.size-full.
In the other example .raise_picture p wins because it refers specifically to a paragraph (p) with a class of .raise_picture while .gap-20px is just a generic class.