开发者

CSS class Disabled?

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜