Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Стили (CSS) Кнопка выглядит по-разному

Кнопка выглядит по-разному


     25.01.2013    Стили (CSS)    1446

вопрос
Ребят подскажите,кнопка с одинаковыми стилями по
разному отображается,например,вывожу её shortstory.tpl-
отображается криво(не видно бордера и теней!),
а если вывести её же в другом блоке,всё идеально(стили те же)
в чем проблема не могу понять,подскажите как исправить?
Наглядно тут-http://ror.tw1.ru

Ответил: ПафНутиЙ


Скриншот из отладчика chrome
Кнопка выглядит по-разному

Кнопка выглядит по-разному

по нажимайте на стрелочки перед стилем - увидите откуда "ноги растут"
Просто стили переопределяются в зависимости от места расположения элемента в DOM-дереве.

Комментарии пользователей (3)

lsdoptom
15 | 4

lsdoptom - 25 января 2013 23:57 - Юзер

всё понажимал,откуда "ноги растут" непонятно : (

Dymatize
6

111 | 104

Dymatize - 26 января 2013 00:23 - Юзер.

Верстка кнопки была изначально - просто ужасна!
Вот, сделал проще
<style>
.button-new {
background: #74BB93;
background: -webkit-gradient(linear, left top, left bottom, from(#74BB93), to(#54A06C));
background: -webkit-linear-gradient(top, #74BB93, #54A06C);
background: -moz-linear-gradient(top, #74BB93, #54A06C);
background: -o-linear-gradient(top, #74BB93, #54A06C);
background: -ms-linear-gradient(top, #74BB93, #54A06C);
background: linear-gradient(top, #74BB93, #54A06C);
display: inline-block;
font-weight: bold;
color: white;
font-size: 12px;
line-height: 20px;
padding: 5px 12px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 #8CC8A8, 0 1px 2px rgba(0, 0, 0, 0.25);
border-radius: 2px;
border: 1px solid #449E65;
}
.button-new:hover {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 #9ACEB3;
background: #82C3A1;
background: -webkit-gradient(linear, left top, left bottom, from(#82C3A1), to(#5AA874));
background: -webkit-linear-gradient(top, #82C3A1, #5AA874);
background: -moz-linear-gradient(top, #82C3A1, #5AA874);
background: -o-linear-gradient(top, #82C3A1, #5AA874);
background: -ms-linear-gradient(top, #82C3A1, #5AA874);
background: linear-gradient(top, #82C3A1, #5AA874);
}
.button-new:active {}
</style>



<a class="button-new" href="#">Download</a>

lsdoptom
15 | 4

lsdoptom - 26 января 2013 00:38 - Юзер

да так намного проще,спасибо огромное!

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы