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

[Carlos]

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:

This is what I had for Rank Icons.....

/* 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...?

 

[Jeremy]

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

 

[Carlos]

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

I removed the code from the extra.css template. @Jeremy Want me to put it back or no?

EDIT: Just re-added: http://www.codforums.com/forums/call-of-duty-ghosts.45/

Fixing it tomorrow morning.

 

[Shelley]

I removed the code from the extra.css template. @Jeremy Want me to put it back or no?

EDIT: Just re-added: http://www.codforums.com/forums/call-of-duty-ghosts.45/

Fixing it tomorrow morning.

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

 

[MagnusB]

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:

.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]

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:

.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.

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

 

[MagnusB]

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]

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!

 

[Shelley]

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:

.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.

 

[Paul B]

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.