1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Rank Image(s) showing up in thread display

Discussion in 'Troubleshooting and Problems' started by Carlos, Oct 24, 2013.

  1. Carlos

    Carlos Well-Known Member

    So, I was working on my ranks - like in this thread.

    But as I was working on them, I come across this weird mishap on thread(s) display:
    NodeThreads.png
    This is what I had for Rank Icons.....
    Code:
    /* Profile Rank Icons */
    .private {
    background: url("http://www.codforums.com/Ranks/Rank1.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .private1stclass {
    background: url("http://www.codforums.com/Ranks/Rank2.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .specialist {
    background: url("http://www.codforums.com/Ranks/Rank3.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .corporal {
    background: url("http://www.codforums.com/Ranks/Rank4.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .sergeant {
    background: url("http://www.codforums.com/Ranks/Rank5.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .staffsergeant {
    background: url("http://www.codforums.com/Ranks/Rank6.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .sergeant1stclass {
    background: url("http://www.codforums.com/Ranks/Rank7.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .sergeantmajor {
    background: url("http://www.codforums.com/Ranks/Rank8.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .lieutenant {
    background: url("http://www.codforums.com/Ranks/Rank9.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .captain {
    background: url("http://www.codforums.com/Ranks/Rank10.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .major {
    background: url("http://www.codforums.com/Ranks/Rank11.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .lieutenantcolonel {
    background: url("http://www.codforums.com/Ranks/Rank12.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .colonel {
    background: url("http://www.codforums.com/Ranks/Rank13.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .brigadiergeneral {
    background: url("http://www.codforums.com/Ranks/Rank14.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .majorgeneral {
    background: url("http://www.codforums.com/Ranks/Rank15.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .lieutenantgeneral {
    background: url("http://www.codforums.com/Ranks/Rank16.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .general {
    background: url("http://www.codforums.com/Ranks/Rank17.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .commander {
    background: url("http://www.codforums.com/Ranks/Rank18.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .prestige1rank {
    background: url("http://www.codforums.com/Ranks/Prestige1.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .prestige2rank {
    background: url("http://www.codforums.com/Ranks/Prestige2.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .prestige3rank {
    background: url("http://www.codforums.com/Ranks/Prestige3.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .prestige4rank {
    background: url("http://www.codforums.com/Ranks/Prestige4.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .prestige5rank {
    background: url("http://www.codforums.com/Ranks/Prestige5.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .prestige6rank {
    background: url("http://www.codforums.com/Ranks/Prestige6.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .prestige7rank {
    background: url("http://www.codforums.com/Ranks/Prestige7.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .prestige8rank {
    background: url("http://www.codforums.com/Ranks/Prestige8.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .prestige9rank {
    background: url("http://www.codforums.com/Ranks/Prestige9.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    
    .prestige10rank {
    background: url("http://www.codforums.com/Ranks/Prestige10.png") no-repeat; center;
    margin-left: -9px;
    height: 50px;
    width: 120px;
    text-indent: -10000em;
    display: block;
    }
    So, uh, what happened here...?
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    I'm not seeing this when I visit your site; although, you node icons are messed up.
     
  3. Carlos

    Carlos Well-Known Member

    Last edited: Oct 24, 2013
  4. Shelley

    Shelley Well-Known Member

    There's no indication from the css you posted that they should display there. What other template did you edit?
     
  5. MagnusB

    MagnusB Well-Known Member

    You need to change the css rule for .major, increase the specificity for the rules in general, so it is only applicable on the post bit:
    Code:
    .userText .major { ..... }
    The class major is using in the forum list as well. Another fix is to remove this from the global extra.css template and add it directly in to the message.css, or similar, so it will not be loaded in node list view.
     
    Shelley likes this.
  6. Carlos

    Carlos Well-Known Member

    Hm. I think I know why this is happening. I used "major" as a class for the ranks - that's what causing the conflict. Interesting.

    I had no idea "major" would be used as a class in a forum software. lol. I thought it was a military rank. lololol. :D

    Changing the class to "rankmajor" to reflect these findings.
     
  7. MagnusB

    MagnusB Well-Known Member

    It is a common word used, others that are likely to crash is private and general. This is why you should either have high specificity in extra.css or use the relevant template for the area you want to change. Single class css rules is generally bad practice, especially for something as specific as user ranks, IMO.
     
  8. Carlos

    Carlos Well-Known Member

    Hm. Okay.
    Annnnnnd THAT worked. :) And I'm off to either sleep, or a overnight video game! :D
     
  9. Shelley

    Shelley Well-Known Member

    good spot never noticed that.
     
  10. Brogan

    Brogan XenForo Moderator Staff Member

    I always prefix any templates or CSS classes I create with cta to avoid issues such as that.

    I know that I'm going to be safe using that as it's the initials of my site and any other developer is very unlikely to use it.
     

Share This Page