Перейти к содержимому

Фото
- - - - -

CSS помогите


  • Вы не можете создать новую тему
  • Please log in to reply
8 ответов в этой теме

#1 ruslan)

ruslan)
  • Постоялец
  • 1 795 сообщений

Отправлено 03 Апрель 2009 - 19:06

Есть форма поиска, отображается криво в разных браузерах.

Код формы:
<form action="">
<input type="text" class="text_search" name="findString" />
<input type="submit" class="button" value="Search" />
<input type="hidden" name="menu" value="2" />
</form>

CSS код текстового поля и кнопки:
 input.button
	{
		border-right: #c3d0e1 1px solid;
		border-top: #c3d0e1 1px solid;
		border-left: #cccccc 1px solid;
		border-bottom: #cccccc 1px solid;
		background-color: #ffffff;
		font-family: verdana;
		font-size: 16px;
		color: #2051A0;
		width: 90px;
		height: 35px;
		
		
	}

 input.text_search
	{
		border-right: #cccccc1 1px solid;
		border-top: #cccccc 1px solid;
		border-left: #cccccc 1px solid;
		border-bottom: #cccccc 1px solid;
		background-color: white;
			font-family: verdana;
		font-size: 25px;
		width: 300px;
		height: 35px;
	}

Хоть и размер текстового поля и кнопки одинаковый по высоте, они разные.. как исправить?
вот скрин кривизны:

Сообщение изменено: Ёлкин-палкин (03 Апрель 2009 - 19:08 )

  • 0

#2 studia@li.ru

studia@li.ru

    Веб-дизайнер

  • Постоялец
  • 56 сообщений

Отправлено 03 Апрель 2009 - 19:35

input.button
{
border-right: #c3d0e1 1px solid;
border-top: #c3d0e1 1px solid;
border-left: #cccccc 1px solid;
border-bottom: #cccccc 1px solid;
background-color: #ffffff;
font-family: verdana;
font-size: 25px;
color: #2051A0;
width: 90px;
height: 35px;


}

input.text_search
{
border-right: #cccccc1 1px solid;
border-top: #cccccc 1px solid;
border-left: #cccccc 1px solid;
border-bottom: #cccccc 1px solid;
background-color: white;
font-family: verdana;
font-size: 25px;
width: 300px;
height: 35px;
}
  • 0

#3 ruslan)

ruslan)
  • Постоялец
  • 1 795 сообщений

Отправлено 03 Апрель 2009 - 19:41

ForumEngine, так же криво, зачем такой большой шрифт на кнопке если слово не влезает..
  • 0

#4 Комуняка

Комуняка

    Кандидат от ф.ее

  • Постоялец
  • 6 452 сообщений
  • Откуда:Из прошлого

Отправлено 03 Апрель 2009 - 19:45

Нубское предложение - если в table загнать ?
  • 0

Орлятам подрезали крылья. Унижены слава и честь. В почете теперь не отвага а сладкая, липкая лесть.


#5 ruslan)

ruslan)
  • Постоялец
  • 1 795 сообщений

Отправлено 03 Апрель 2009 - 19:49

Комуняка, пробовал, выравнивает но кнопка меньше всеравно, мне интересно почему размеры одинаковые в коде, а на самом деле...

Сообщение изменено: Ёлкин-палкин (03 Апрель 2009 - 19:50 )

  • 0

#6 LiD

LiD
  • Постоялец
  • 453 сообщений

Отправлено 05 Апрель 2009 - 09:30

Ёлкин-палкин, Welcome to the htmling world :) Проблема эта - гловная боль для верстальщиков. Используй тэйблы и паддинги, ими сможешь выровнять для браузеров на основе мозиллы. Декларации ИЕ используй для Интернет Эксплорера, там пиши отдельный ЦСС для ИЕ . Надеюсь ты все опнял, что я тут расписал.
  • 0

#7 ruslan)

ruslan)
  • Постоялец
  • 1 795 сообщений

Отправлено 05 Апрель 2009 - 11:57

LiD, да, я уже узнал как это исправить, загнал в табличку, и ковырял пока не выравнилось
  • 0

#8 showman

showman
  • Новобранец
  • 5 сообщений

Отправлено 13 Май 2009 - 15:09

Самый простой пример: обоим классам float: left; A для input.button поставить height: 39px;
  • 0

#9 Anry Le France

Anry Le France

    Fuck Fuckdation (c)

  • Постоялец
  • 801 сообщений

Отправлено 25 Май 2009 - 17:49

Самый простой пример: обоим классам float: left; A для input.button поставить height: 39px;

это да.

Ещё надо задать обоим полям параметр -> line-height, дабы выравнять текст по центру.

что-то в этом роде:

input.button {
		border-right: #c3d0e1 1px solid;
		border-top: #c3d0e1 1px solid;
		border-left: #cccccc 1px solid;
		border-bottom: #cccccc 1px solid;
		background-color: #ffffff;
		font-family: verdana;
		font-size: 16px;
		color: #2051A0;
		width: 90px;
		height: 35px;
	line-height: 34px;
	float: left;
}
input.text_search {
		border-right: #cccccc1 1px solid;
		border-top: #cccccc 1px solid;
		border-left: #cccccc 1px solid;
		border-bottom: #cccccc 1px solid;
		background-color: white;
		font-family: verdana;
		font-size: 25px;
		width: 300px;
		height: 31px;
	line-height: 30px;
	float: left;
}

  • 0
Циник, грубиян и тролль 80го уровня.