CSS класс отключен?

Question

Для моего форума vBulletin изображения аватаров извлекаются так:

<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" />

Обратите внимание на класс = "forumavatar1"

CSS для этого класса выглядит следующим образом:

.forumavatar1 {
padding: 2px;
border: 1px solid black;
background: white;
}

Но по какой-то причине черная рамка не отображается. В Google Chrome и Firebug эта граница: элемент перечеркивается ??

Пример страницы, посмотрите на изображение чьего-то аватара: http://forums.animefushigi.com/showthread.php?31-So-about-that-dark-theme

Answer 1

Попробуйте прочитать эту статью на Особенности CSS - короче говоря, ваш одноклассный селектор переопределяется мультиклассовым селектором. Чтобы это исправить (хотя я бы не рекомендовал это как постоянное исправление), вы можете изменить свой стиль выше на:

.forumavatar1 {
    padding: 2px;
    border: 1px solid black !important;
    background: white;
}

Я бы предложил вместо этого взглянуть и изменить стиль, который его переопределяет, а именно:

.postbitlegacy .userinfo .postuseravatar img, .eventbit .userinfo .eventuseravatar img {
    border: 0 solid #F2F6F8;
    max-width: 180px;
    outline: 0 dotted #DADADA;
}

Answer 2

это происходит потому, что .postbitlegacy .userinfo .postuseravatar img, .eventbit .userinfo .eventuseravatar img имеет border: 0 solid #F2F6F8;, и это переопределяет селектор .forumavatar1. Вы можете изменить специфичность селектора с .forumavatar1 на .userinfo .postuseravatar img.forumavatar1, и он станет черным.

Дополнительная статья для уточнения: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Даже если это очень полезный метод, используйте его с умом.

В качестве последнего убежища я предлагаю !important

Answer 3

Если это вычеркнуто, то что-то еще с более высоким приоритетом переопределяет это. Попробуйте добавить! Важно, чтобы увидеть, если это будет работать.

border: 1px solid black !important;

Если это так, вы можете либо сохранить! Важно, либо узнать, что переопределяет его.