class ordering problems
# May 25, 2009 at 11:03 am
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:
http://www.logicalley.se/fikon/?page_id=207 (on a test server)
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.
Thanks in advance
Aicos# May 25, 2009 at 12:25 pm
Man that’s a lot of divs!
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.
Hope that makes sense. If you were ever a Star Wars fan you can download a handy "cheat sheet" here that explains it all rather well. http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html# May 25, 2009 at 3:24 pm"apostrophe" wrote:
HAHAHA ROFL. That is absolutely genius. haha…. my sides hurt.
You must be logged in to reply to this topic.