Grow your CSS skills. Land your dream job.

class ordering problems

  • # May 25, 2009 at 11:03 am

    Hi

    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:

    http://www.fiko
    ndesign.se/om-fiko
    ndesign/affarside/
    (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

    HAHAHA ROFL. That is absolutely genius. haha…. my sides hurt.

    # May 26, 2009 at 10:28 am

    Many thanks Apostrophe.. Including the #main in the overriden selector solved the problem.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".