• 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

Carlos

Well-known member
#1
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...?
 

MagnusB

Well-known member
#5
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.
 

Carlos

Well-known member
#6
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.
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.
 

MagnusB

Well-known member
#7
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.
 

Carlos

Well-known member
#8
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.
Hm. Okay.
Changing the class to "rankmajor" to reflect these findings.
Annnnnnd THAT worked. :) And I'm off to either sleep, or a overnight video game! :D
 

Shelley

Well-known member
#9
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.
good spot never noticed that.
 

Brogan

XenForo moderator
Staff member
#10
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.