Не отображается нормально кнопка. Мучаюсь уже с ней три года. Как задать высоту элементу button?

Question

[PO6OT]

woonem.tk/system - кнопка button.
Стили нужно менять так, чтоб кнопки button в виде ссылок не испортились (woonem.tk/error - кнопочки) и чтоб в браузере Opera Mini 7 (J2ME), в Google Chrome (Android) и в Google Chrome (Windows) всё отображалось одинаково.

Вот стили и кнопки:

.button{
margin: 0;
margin-top: 1px;
border: 1px solid #08f;
background: #08f;
padding: 9px;
color: #fff !important;
text-decoration: none !important;
}

a[class="button"]{
line-height: 48px !important;
}

<a href="http://woonem.tk/" class="button">Перейти на главную</a>

<input type="submit" name="submit" class="button" value="Войти">

А то если убираешь line-height, то в опере становятся плоские кнопки, а простой padding не работает :(
И вообще меня достало, что всё, что связано с form ужасно не поддается стилизации. В W3C наверно жопой писали.

Comments

[Дмитрий]

вы просто не до читали до нужного места ))

Answer 1

[Y0Y]

Так должно нормально отображаться.

Answer 2

[Aleksandr]

<input type="button" class="button">Войти</input>
Это вообще что?*)

делайте не импутом, сделайте дивом, баттоном.

Comments

[PO6OT]

извините, не доглядел
переделал норм

[Михаил]

Ну если очень хочется input, то нужно писать текст кнопки в атрибут value

[PO6OT]

а как вы себе представляете кнопку формы сделать дивом??

[PO6OT]

Михаил: лол

[Aleksandr]

Вадим Егоров: Я как представляю?)

[Михаил]

Вадим Егоров: display: inline-block и убрать line-height =)

[PO6OT]

Михаил: если убрать line-height, то ссылки с этим классом налезают на текст (вот пример - woonem.tk/feedback )

[Aleksandr]

Вадим Егоров: У вас ошибка в display...

[PO6OT]

Sashjkeee: какая-то херня произошла и теперь кнопка не нажимается

[Михаил]

Вадим Егоров: ну так вы display правильно напишите и не будут наезжать и используйте margin для отступов

[holfza]

Вадим Егоров: type="submit"

[Aleksandr]

Вадим Егоров: напиши display нормально. и все будет ок

Answer 3

[Иван]

<div id="button">Какая-то ахренительная кнопка</div>

<script>
$('#button').click(function(){
// Сделать магию!
});
</script>

<style>
#button{
// Сделать красиво
}
</style>

Comments

[PO6OT]

если бы мне можно было использовать js, я бы не задавал такой вопрос

[Иван]

Вадим Егоров: тогда никак. Формы вообще кастомизуются хреново и развивать их судя по всему не будут за ненадобностью.

Answer 4

[Денис Инешин]

https://github.com/necolas/normalize.css/ и

.button {
    dispay: block;
    // или
    display: inline-block;
}

и вуаля, все паддинги работают как надо.

Comments

[Иван GiBSON]

Решение это конечно хорошо но неплохо бы добавить причину этого))

Итак: у вас вся проблема в том что button и а являются строчными элементами и поэтому применение высоты и ширины не даст эффекта, а если им поставить отображение как блок или инлайн блок, тогда все сработает и можно даже padding не добавлять а сразу поставить высоту блока

[PO6OT]

Иван GiBSON: ещё надо учитывать, что Opera Mini очень специфично относится к кнопкам

Answer 5

[holfza]

Отправить форму можно и дивом

<form action="">
	<div onclick="$(this).parents('form').submit()">Отправить</div>
</form>

Comments

[PO6OT]

надо без js