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

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

08.02.2013, 10:49. Показов 5113. Ответов 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
Ответ Создать тему

Редактор формул (кликните на картинку в правом углу, чтобы закрыть)
Новые блоги и статьи
Осваиваем Kubernetes: Подробная шпаргалка
Mr. Docker 15.03.2025
Kubernetes — это открытая платформа для автоматизации развертывания, масштабирования и управления контейнеризированными приложениями. Он был создан для решения проблем, с которыми сталкиваются. . .
Лучшие PHP REST API фреймворки
Jason-Webb 15.03.2025
Современные PHP REST API фреймворки предлагают большой набор функциональности: от автоматической валидации данных и управления маршрутизацией до генерации документации и интеграции с различными. . .
Многопоточность в Java с Project Loom: виртуальные или обычные потоки
Javaican 15.03.2025
Многопоточность всегда была одноим из основных элементов в разработке современного программного обеспечения. Она позволяет приложениям обрабатывать несколько задач одновременно, что критично для. . .
Что нового в Swift 6 и особенности миграции
mobDevWorks 15.03.2025
Swift 6 — это новый крупный релиз языка программирования от Apple, анонсированный на WWDC 2024. Если вы следили за эволюцией Swift, то наверняка заметили, что многие значимые возможности, которые. . .
Вопросы на собеседовании по Android
mobDevWorks 14.03.2025
По данным статистики, Android занимает более 70% мирового рынка мобильных операционных систем, что делает платформу привлекательной как для начинающих разработчиков, так и для опытных профессионалов. . . .
Лучшие игровые движки для Python
py-thonny 14.03.2025
Python обеспечивает разработчиков игр мощными движками и фреймворками, которые позволяют воплотить практически любую идею — от простой аркады до визуального романа с разветвленным сюжетом. Главное. . .
Бессерверный JavaScript: Разработка масштабируемых API с AWS Lambda
run.dev 14.03.2025
Но что такое бессерверные вычисления на самом деле? По сути, это модель облачных вычислений, где разработчик фокусируется исключительно на создании бизнес-логики, не тратя время на настройку. . .
Безопасность кода в C++26: Менеджеры ресурсов и висячие ссылки
NullReferenced 14.03.2025
C++ всегда был языком, предоставляющим разработчикам большие возможности и гибкость, но вместе с тем требующим ответственности. Одной из самых коварных проблем даже для опытных программистов остаются. . .
smart-agent proper interface settings (2025)
jigi33 14.03.2025
Smart-agent proper interface settings (mart 2025). (see screenshots to look at "Etalon" ARM)
Продвинутые настройки JVM
Javaican 14.03.2025
Стандартные параметры запуска JVM хороши для повседневной разработки, но совершенно недостаточны для высоконагруженных систем. Представьте, что вы запускаете финансовую платформу, обрабатывающую. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru
Выделить код Копировать код Сохранить код Нормальный размер Увеличенный размер