ТвойWeb :: Версия для печати :: "Объемные" динамические кнопки при помощи CSS

1. SMArt - 15 Мая, 2005 - 13:50:23 - перейти к сообщению

Сделал вот такую штуку, а вернее где-то подсмотрел:

CODE:

.butt:link{
color: #000000;
background-color: #9CBAAD;
text-decoration: none;
width: 100;
height: 20;
border: 1, outset;
text-align: center;
cursor: hand?, Strength=?);
filter: dropShadow (color=#FFFFFF, offx=3, offy=3, positive=false);

}
.butt:visited{
color: #000000;
background-color: #9CBAAD;
text-decoration: italic;
width: 100;
height: 20;
border: 1, outset;
text-align: center;
cursor: hand?, Strength=?);
filter: dropShadow (color=#FFFFFF, offx=3, offy=3, positive=false);

}
.butt:hover{
color: #000000;
background-color: #D6EBDE;
width: 100;
height: 20;
border: 1, outset;
text-align: center;
text-decoration: none;
filter: dropShadow (color=#FFFFFF, offx=3, offy=3, positive=false);

}
.butt:active{
color: #000000;
background-color: #D6EBDE;
width: 100;
height: 20;
border: 1, inset;
text-align: center;
text-decoration: none;
filter: dropShadow (color=#FFFFFF, offx=3, offy=3, positive=false);

}

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

CODE:

Смотрится нормально только в IE Недовольство, огорчение

Что нужно поправить, чтобы это все правильно выглядело в Мозилле и в Опере? Сделать кнопки графикой не предлагайте пожалуйста, а?

2. Анна - 15 Мая, 2005 - 15:59:18 - перейти к сообщению

SMArt
Ни фига не поняла зачем тебе тут фильтр.
Можно бордером все сделать.
Но так не пишется:

CODE:

border: 1, outset;

Достаточно просто добавить

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

чтобы увидеть печальные последствия. Улыбка

3. SMArt - 15 Мая, 2005 - 16:32:46 - перейти к сообщению

Анна, проблема не в этом... В Опере кнопки получаются не заданного размера, а в "облипочку" к тексту ссылки.

Цитата:

так не пишется:

CODE:

border: 1, outset;

Почему? Dreamweaver сгенерил вот так:

CODE:

border: 1px outset;

P.S. Все добавлено, почему последствия должны быть печальными? Улыбка

4. Анна - 15 Мая, 2005 - 17:10:11 - перейти к сообщению

SMArt

Цитата:

вот так:

Найди отличия. Ты же не так писал.
И text-decoration: italic; - это что?

Цитата:

В Опере кнопки получаются не заданного размера, а в "облипочку" к тексту ссылки.

Так это из-за того, что "все добавлено". Улыбка

Убери doctype - не будет "облипочки". Во всяком случае, в Опере.
Кстати, к ссылке неплохо бы еще добавить

CODE:

onFocus="this.blur()"

\n\n(Добавление)
SMArt
В обсчем, в дополнение..
К ширине, высоте пиксели надо приписывать. Это Маркус заметил, я же, как всегда, ворон считаю.

Ну и буковку "A" не забывай, когда стили для ссылок указываешь.
А NN ширину и высоту в данном случае в упор не понимает.

5. SMArt - 15 Мая, 2005 - 18:57:13 - перейти к сообщению

DOCTYPE убрал, CSS поменял -

CODE:

.butt:link{
color: #000000;
background-color: #9CBAAD;
text-decoration: none;
width: 100px;
height: 20px;
border: 1px outset;
text-align: center;
cursor: hand;
}
.butt:visited{
color: #000000;
background-color: #9CBAAD;
text-decoration: italic;
width: 100px;
height: 20px;
border: 1px outset;
text-align: center;
cursor: hand;
}
.butt:hover{
color: #000000;
background-color: #D6EBDE;
width: 100px;
height: 20px;
border: 1px outset;
text-align: center;
text-decoration: none;
}
.butt:active{
color: #000000;
background-color: #D6EBDE;
width: 100px;
height: 20px;
border: 1px inset;
text-align: center;
text-decoration: none;

}

все равно получается вот так:

6. Анна - 15 Мая, 2005 - 19:21:09 - перейти к сообщению

SMArt
Смотри:
http://anna.tvoyweb.ru/forum/test3.html
И смотри скрин.
Возможно, у нас разные версии Оперы.

Знакомое меню. Улыбка

Помнится, бывала у тебя на сайте и даже в гостевой. Улыбка

7. SMArt - 15 Мая, 2005 - 19:44:57 - перейти к сообщению

у меня Maxthon на IE6 и Opera 8.0, думаю дело не в них, в Опере 7.52 отображалось точно так же... пойду лопатить второй StyleSheet на предмет логических нестыковок в описании вида ссылок... Не получается у меня то, что у тебя на скрине Недовольство, огорчение

8. TvoyWeb - 15 Мая, 2005 - 20:12:44 - перейти к сообщению

SMArt пишет:

и Opera 8.0

У меня в восмерке то же самое. А в 7.23 как и положено, то есть как на скрине у Анны.

9. SMArt - 17 Мая, 2005 - 03:30:46 - перейти к сообщению

Похоже следствие зашло в тупик... Улыбка

Письмо чтоль разработчиками Opera написать, чтобы в следующей версии все на место вернули... походу придется делать на DHTML... Ой, как не хочется...

10. 23Rus - 28 Июня, 2005 - 07:34:38 - перейти к сообщению

А вот посмотрите как я сделал: http://divn.narod.ru
Тоже как кнопка, но все в стилях, так мона мой стиль подкорректировать и получить то же что и Вы хотите.
Я не настаиваю - это как альтернатива.

Кстати у меня вроде во всех браузерах одинакого смотриться.

Всем удачи и чтоб не было проблем.

Как код посмотреть знаете, а то времени нету совсем.