For my vBulletin forum, avatar images are pulled with this:
<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" class="forumavatar1" />
Note the class="forumavatar1"
The css for this class as is follows:
.forumavatar1 {
padding: 2px;
border: 1px solid black;
background: white;
}
But for some reason the black border is not showing. On Google Chrome and Firebug, 开发者_StackOverflow社区this border: element is being crossed out ??
Example page, look at someone's avatar image: http://forums.animefushigi.com/showthread.php?31-So-about-that-dark-theme
Try reading this article on CSS Specificity - in short, your single-class selector is being overridden by a multi-class selector. To fix this (although I wouldn't recommend this as a permanent fix), you can change your style above to:
.forumavatar1 {
padding: 2px;
border: 1px solid black !important;
background: white;
}
I would suggest instead, that you take a look at and modify the style which is overriding it, which is:
.postbitlegacy .userinfo .postuseravatar img, .eventbit .userinfo .eventuseravatar img {
border: 0 solid #F2F6F8;
max-width: 180px;
outline: 0 dotted #DADADA;
}
this happens because .postbitlegacy .userinfo .postuseravatar img, .eventbit .userinfo .eventuseravatar img
have border: 0 solid #F2F6F8;
and this override the selector .forumavatar1
. You can change the selector's specificity from .forumavatar1
to .userinfo .postuseravatar img.forumavatar1
this will make it black.
Additional article for specificity: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Even if it's very helpful method, use it wisely.
As last refuge I suggest !important
If it's crossed out then something else with higher priority is overriding it. Try adding an !important to it to see if that will make it work.
border: 1px solid black !important;
If it does, you can either keep the !important or find out what is overriding it.
精彩评论