Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS class ordering problems

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #24949
    aicos
    Participant

    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

    #58139
    apostrophe
    Participant

    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

    #58152
    AshtonSanders
    Participant

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

    #58190
    aicos
    Participant

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.