Кривой background: url("...") у буттона в FF & @ DeForum.ru

0 Сообщения: 9 Зарегистрирован: 14.07.07

Хеллоу.

Есть стиль для буттонов, в IE6/7 & Opera буттон нормально нажимается - т.е. при нажатии кнопкой мыши "просаживается", создавая тем самым подобающий эффект. А вот в FF и Safari -- нифига, на нажатие мыши визуально никак не реагирует.

Код:

input.button {
   background: url("/i/butt-back.jpg");
   border: none;
   overflow: visible;
   font-size: 1.5em;
   font-weight: normal;
   border-bottom: 1px solid #A4A9B0;
   border-right: 1px solid #A4A9B0;
   border-left: 1px solid #DDDFE1;
   border-top: 1px solid #DDDFE1;
   padding: 2 10 2 10;
   cursor: pointer;
}

Проблема не архи важная, но мож кто знает как её решить :chih:

.

Modjo,
красивый и длинный стиль написан, да... ну, во-первых, где б увидеть в действии то, что не работает в FF и Safari?
А во-вторых, просто из любопытства: Вас не устраивают бордеры groove/ridge/inset/outset?
Мoжет, конечно, в соответствии с Вашей практической задачей надо как Вы указали, дайте глянуть, а?

Modjo, сафари опера и фф поддерживают событие :hover на элементах отличных от линков вот и используйте это. Пропишите input.button:hover { и впишите туда какоенибудь изменение хотьбек меняйте хоть рамку...

ulitin kirill писал(а):

Modjo, сафари опера и фф поддерживают событие :hover на элементах отличных от линков

Я не думаю, что в данном случае необходимо применение стиля при прохождении курсора над объектом. Надо при нажатии. Надо живьём смотреть + код.

Modjo, джаваскрипт может решить этот вопрос: http://www.narisoval.ru/faq/ex01-002.html

Цитата:

в IE6/7 & Opera буттон нормально нажимается - т.е. при нажатии кнопкой мыши "просаживается"

это видно только если есть текст и меняются свойтсва бордеров. При наличии только картинки эффекта «просаживания» нет ни в одном популярном броузере.

karamba, делается 2 картинки ))))
tentoys, ну можно и не ховер ставить

ulitin kirill, свойство background-position работает и через джаваскрипт:

Код:

<style>
input {background: url(bla-bla) 0 0 no-repeat;}
</style>
…
<input type="submit" value="Найти" onmousedown="this.style.backgroundPosition='1px 1px';" onmouseup="this.style.backgroundPosition='0 0';"  onfocus="this.style.backgroundPosition='1px 1px';" onblur="this.style.backgroundPosition='0 0';" />

Modjo, рекомендация в догонку: лучше не использовать кавычки для значения url(" ") или url(' '). Совсем недавно это было не совсем универсально ) Береженого, как грится…

0 Сообщения: 9 Зарегистрирован: 14.07.07

самое кошерное решение от karamba, спасибо.

однако нужно сдвигать не бэкграунд, а текст:

Код:

<input type="button" class="button" value="Найти"
   onmousedown="this.style.padding='3 9 1 11';"
   onmouseup="this.style.padding='2 10 2 10';"
   onfocus="this.style.padding='3 9 1 11';"
   onblur="this.style.padding='2 10 2 10';"
 />

Modjo писал(а):

нужно сдвигать не бэкграунд, а текст

оффтопик:

хм, а говорил «кривой бекграунд»… Как фон с паддингом связан-то?

DeДверь
Логин:
Пароль:
	Автологин