Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.92/26: Рейтинг темы: голосов - 26, средняя оценка - 4.92
2 / 2 / 0
Регистрация: 08.02.2013
Сообщений: 30
1

Равная высота поля и кнопки и кроссбраузерность

08.02.2013, 10:49. Показов 5117. Ответов 18
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Господа, я тут несколько дней мучаюсь и не могу сделать поле и кнопку одинаковой высоты, чтобы текст внутри и само поле с кнопкой были выровнен. Хе-хе, думаете это просто? Это не просто! Ведь нужно чтобы было кроссбраузерно, а именно:

IE 5,5 (важно!)
IE 6 (важно!)
IE 7
IE 8
IE 9

Chrome
Safari
Firefox
Opera

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form action="/search/" method="get">
 
<input type="text" name="searchword" value="Поиск по сайту" style="

height: 1.9em;
border: 1px solid red;
padding: 0;
margin: 0;
outline: none; 
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
white-space: nowrap;
border: 1px solid red;">
 
<input type="submit" value="Искать" style="

height: 1.9em;
padding: 0 9px;
margin: 0;
outline: none;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid red;">
 
</form>
Вот так должно быть:
Миниатюры
Равная высота поля и кнопки и кроссбраузерность  
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
08.02.2013, 10:49
Ответы с готовыми решениями:

Высота блока равная размеру фоновой картинки блока
Здравствуйте. Дано: &lt;nav&gt; &lt;a href=&quot;litolin.html&quot; id=&quot;litolin-link&quot; class=&quot;navi&quot;&gt; ...

Высота поля со списком
Как задать высоту выпадающего списка? У меня в нем содержится 30 значений, и когда приходится его открывать, то он вываливается на весь...

Высота кнопки другая в firefox-е
в хроме, в опере, в ie - всё нормально. но в файрфоксе высота кнопки больше на 3 пикселя. пожалуйста подскажите, что надо сделать? ...

18
 Аватар для koza4ok
632 / 440 / 67
Регистрация: 19.09.2012
Сообщений: 1,632
08.02.2013, 11:01 2
line-height поставить равным высоте кнопки ,если уберете вертикальные padding для кнопок.
1
2 / 2 / 0
Регистрация: 08.02.2013
Сообщений: 30
08.02.2013, 11:28  [ТС] 3
Не катит!
Я уже не знаю что делать

Добавлено через 16 минут
Вся проблемма из-за IE 5.5 и IE 6.
Если я сделаю так, чтобы корректно отображалось во всех браузерах, то в IE 5.5 и IE 6 отображается иначе.
0
Почетный модератор
12274 / 5339 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
08.02.2013, 12:48 4
Дерек, текста в кнопках лучше выравнивать с помощью

CSS
1
vertical_align: middle
1
2 / 2 / 0
Регистрация: 08.02.2013
Сообщений: 30
08.02.2013, 13:51  [ТС] 5
Блин, при чём тут только выравнивание текста!?
Тут вопрос не только в этом. Комплекс тут!
Вот вы сами попробуйте и посмотрите что у вас получится.
Было бы так всё просто, то я не стал обращаться за помощью
Я уже несколько дней мучаюсь и не могу сделать одинаковой высоты поле и кнопку и чтобы они сами были выровнены и текст внутри тоже.
В общем так, как на рисунке я вам показал.
Попробуйте сделать, если интересно.
Может у кого-то и получится.

Я уже что только не пробовал и не получается у меня.
Я уже и кучу фреймворков пересмотрел с образцами разных форм и кнопочек - и у всех них косячные input, у всех что-то да криво.
0
 Аватар для xaus
10 / 10 / 0
Регистрация: 30.01.2013
Сообщений: 93
08.02.2013, 14:37 6
просмотрел код у себя во всех браузерах все ровно даже в разных версиях только в мазиле чуток кнопка выше на пару пиксилей
может быть сделать один блок и в нем сделать еше 2-а блока один поле для вода текста другой кнопка, так расползаться небудет
1
2 / 2 / 0
Регистрация: 08.02.2013
Сообщений: 30
08.02.2013, 15:07  [ТС] 7
В 5.5 смотрел?
Так вся суть в 1 и 2 пикселях. Даже скорее в 1.
То кнопка выше на пиксель.
То высота на 1 пиксель меньше, то ещё чего.
Об этом и речь.
Вы что думаете, что проблема в 3-10 пикселях!?
Только в одном!
Вот я и говорю, как сделать всё одной высоты и выравнено?
0
странник
 Аватар для Donald28
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
08.02.2013, 15:15 8
сделай кнопку не через input, а через div, придав ему соответствующий стиль, чтобы выглядел так же.
HTML5
1
<div id="submit" onclick="form.submit();">Искать</div>
либо используй type="image":
HTML5
1
<input type="image" src="imgbutton.gif" />
1
2 / 2 / 0
Регистрация: 08.02.2013
Сообщений: 30
08.02.2013, 15:19  [ТС] 9
Вообще-то интересно именно через просто input.
Через картинку вообще не подходит.
И button тоже не катит.
0
странник
 Аватар для Donald28
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
08.02.2013, 15:23 10
Если через submit - то не уверен, что проблема кроссбраузерности разрешима в указанных браузерах (тем более для 5 осла).
Цитата Сообщение от Дерек Посмотреть сообщение
Через картинку вообще не подходит.
Почему? У submit и image - одинаковая функция: при нажатии отправлять форму.
1
2 / 2 / 0
Регистрация: 08.02.2013
Сообщений: 30
08.02.2013, 15:32  [ТС] 11
Осёл не 5, а 5.5.
Картинка не подходит для резиновой, респонсивной, адаптивной вёрстки.
0
Почетный модератор
12274 / 5339 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
08.02.2013, 15:38 12
Цитата Сообщение от Дерек Посмотреть сообщение
Блин, при чём тут только выравнивание текста
все остальное - аналогично. комплекс тут)

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

http://rotorweb.ru/htmlcss-ver... ormax.html
1
2 / 2 / 0
Регистрация: 08.02.2013
Сообщений: 30
08.02.2013, 15:49  [ТС] 13
Нету никакого паддинга у меня.
Задаю высоту допустим в пикселях, так получается - кнопка включая бордер = 24 пикселя, а поле 24 пикселя + бордер = 26 пикселей. А в старом Осле всё нормально.
Миниатюры
Равная высота поля и кнопки и кроссбраузерность  
0
08.02.2013, 15:53 14

Не по теме:

там написано IE 5.5 ???? :swoon:

0
 Аватар для Vovan-VE
13210 / 6599 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069
08.02.2013, 15:58 15
Дерек, Уберите height. Вместо него font-size и padding + border.
Кстати, у Вас border дублируется.
1
2 / 2 / 0
Регистрация: 08.02.2013
Сообщений: 30
08.02.2013, 16:05  [ТС] 16
Это вообще не подходит.
Если убрать height, то в 5.5 поле вообще будет низкое.
Миниатюры
Равная высота поля и кнопки и кроссбраузерность  
0
2 / 2 / 0
Регистрация: 08.02.2013
Сообщений: 30
08.02.2013, 16:10  [ТС] 17
Уважаемые господа.
Можно вас попросить реальное решение дать?
Вы тут всякие советы даёте, но вы хоть сами сначала посмотрите что выйдет, если применить ваш совет.
0
 Аватар для Vovan-VE
13210 / 6599 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069
08.02.2013, 16:22 18
Дерек, Не у всех есть винда. Тем более с такими динозаврами в рабочем состоянии.

Добавлено через 1 минуту
Дерек, См. также условные комментарии MS. http://msdn.microsoft.com/en-u... S.85).aspx

Добавлено через 2 минуты
HTML5
1
2
<!--[if lt IE 6]><link rel="stylesheet" href="ie5.css" type="text/css" /><![endif]-->
<!--[if IE 6]>   <link rel="stylesheet" href="ie6.css" type="text/css" /><![endif]-->
2
2 / 2 / 0
Регистрация: 08.02.2013
Сообщений: 30
08.02.2013, 16:29  [ТС] 19
Вы имеете в виду, что нужно использовать дополнительные стили с хаками.
Может это действительно единственное решение.

Кстати, у меня тоже нет старых Виндов отдельно на компе. Но есть тестер с пакетом Виндов.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
08.02.2013, 16:29
Помогаю со студенческими работами здесь

Цвет кнопки и кроссбраузерность
Ребят, подскажите пожалуйста как с помощью js дописать условие при котором должен меняться цвет кнопки в зависимости от значения переменной...

Высота поля Edit
Всем привет! По умолчанию она равна 24, я меняю на 17, все вроде нормально, сохраняю, перезапускаю программу, открываю проэкт, а Height...

Создать класс Сарай, имеющий поля: высота, ширина, глубина
Помогите разобраться с классами. 1. Создать класс Сарай, имеющий поля: высота, ширина, глубина. Создать производный класс Дом,...

Отправка содержимого поля в файл при нажатии кнопки без потери этого содержимого с поля
Привет всем!) Я отправляю содержимое textarea в файл при нажатии кнопки, после нажатия на кнопку содержимое стирается с этого поля. Как...

Создайте класс Конус, определите в нем закрытые поля Радиус, Высота, Образующая, свойства для этих полей
Создайте класс Конус, определите в нем закрытые поля Радиус, Высота, Образующая, свойства для этих полей, методы вывода сведений об...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
19
Ответ Создать тему
Новые блоги и статьи
Java Micronaut в Docker: контейнеризация с Maven и Jib
Javaican 16.03.2025
Когда речь заходит о микросервисной архитектуре на Java, фреймворк Micronaut выделяется среди конкурентов. Он создан с учётом особенностей облачных сред и контейнеров, что делает его идеальным. . .
Управление зависимостями в Java: Сравнение Spring, Guice и Dagger 2
Javaican 16.03.2025
Инъекция зависимостей (Dependency Injection, DI) — один из фундаментальных паттернов проектирования, который радикально меняет подход к созданию гибких и тестируемых Java-приложений. Суть этого. . .
Apache Airflow для оркестрации и автоматизации рабочих процессов
Mr. Docker 16.03.2025
Управление сложными рабочими процессами — одна из главных головных болей инженеров данных и DevOps-специалистов. Представьте себе: каждый день нужно запускать десятки скриптов в определенной. . .
Оптимизация приложений Java для ARM
Javaican 16.03.2025
ARM-архитектура переживает настоящий бум популярности в технологическом мире. Когда-то воспринимаемая исключительно как решение для мобильных устройств и встраиваемых систем, сегодня она штурмует. . .
Управление состоянием в Vue 3 с Pinia и Composition API
Reangularity 16.03.2025
Когда я начал работать с Vue несколько лет назад, мне казалось достаточным использовать простую передачу данных через props и события между компонентами. Однако уже на среднем по сложности проекте. . .
Введение в DevSecOps: основные принципы и инструменты
Mr. Docker 16.03.2025
DevSecOps - это подход к разработке программного обеспечения, который объединяет в себе принципы разработки (Dev), безопасности (Sec) и эксплуатации (Ops). Суть подхода заключается в том, чтобы. . .
GitHub Actions vs Jenkins: Сравнение инструментов CI/CD
Mr. Docker 16.03.2025
В этой битве за эффективность и скорость выпуска программных продуктов ключевую роль играют специализированные инструменты. Два гиганта в этой области — GitHub Actions и Jenkins — предлагают разные. . .
Реактивное программировани­е с Kafka Stream и Spring WebFlux
Javaican 16.03.2025
Реактивное программирование – это программная парадигма, ориентированная на потоки данных и распространение изменений. Она позволяет выражать статические или динамические потоки данных и. . .
Простая нейросеть на КуМир: Учебное пособие по созданию и обучению нейронных сетей
EggHead 16.03.2025
Искусственные нейронные сети — удивительная технология, позволяющая компьютерам имитировать работу человеческого мозга. Если вы хотя бы немного интересуетесь современными технологиями, то наверняка. . .
Исполнитель Кузнечик в КуМир: Решение задач
EggHead 16.03.2025
Среди множества исполнителей в системе КуМир особое место занимает Кузнечик — простой, но невероятно полезный виртуальный персонаж, который перемещается по числовой прямой, выполняя ваши команды. На. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru