Положение текста внутри input

[warobushek]

Помогите пожалуйста.

Нужно чтобы текст был на определенном расстоянии от нижней границы в элементе INPUT (бэкграунда для INPUT).

Удалось добиться такого визуального эффекта в мозилле за счет уменьшения высоты самого input.

В IE 7 это не вышло, т.к. input выравнивается внутри div в мозилле - по верхнему краю, а в ИЕ - по нижнему.

Пробовал использовать padding-bottom для INPUT но он почему то не работает для него.

Вот проблемная часть http://tri4.ax3.net/akado_ural/akado-ural.html

[psywalker]

Используй Условные комментарии для ИЕ

[warobushek]

Хорошо буду использовать,

но разъясните, пожалуйста, сущность этой проблемы.

Т.е. что именно ИЕ не так воспринимает?

—-

Если Вы имеете ввиду vertical-align, то я его выставлял в top и все равно IE его игнорит.

Edited April 23, 2010 by warobushek

[psywalker]

Хорошо буду использовать,

но разъясните, пожалуйста, сущность этой проблемы.

Т.е. что именно ИЕ не так воспринимает?

—-

Если Вы имеете ввиду vertical-align, то я его выставлял в top и все равно IE его игнорит.

Чтобы понять сущность ИЕ, нужно быть индусом, который его делал.

Я имею ввиду http://designformasters.info/posts/conditional-comments/

[PoshtarBoba]

Основной параметр тега <INPUT>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список параметров, которые определяют его вид и характеристики.

Обясните подробней какой именно вы используете элемент, дайте код, нарисуйте в паинте то, чего вы хотите добиться и покажите нам. Пока условие задачи представляется очень смутным.

Если вы про текстовое поле, тогда бекграунд лучше вешать на внешний элемент (в IE6 бекграунд на input.text уезжает влево, если печатать много текста в поле ввода).

<span><input ... class="editbox"></span>

span { display:block; background:url(...) no-repeat left top;}

input.editbox { padding:7px 4px 4px 4px; font-size:12px; line-height:18px; height:18px; width:192px; background:none; border:none;}

Сумма вертикальных паддингов и высоты элемента (или лайн-хейджа) должна равняться высоте картинки бекграунда:

7px + 4px +18px = 29px;

Ширина картинки бекграунда:

4 + 4 + 192 = 200px

Если не получится с IE - оставьте паддинги инпута в покое и двигайте поле ввода внутри span с помощью отступов.

Edited April 23, 2010 by PoshtarBoba

[warobushek]

)))

дак мне не сущность ИЕ понять надо

а какое правило он не так воспринимает?

за ссылку же спасибо (полезная вещь),но это то понятно

Edited April 23, 2010 by warobushek

[mishka]

все что нужно инпуту в твоем случае:

#enter_akado input{

float:left;

border:0;

padding:3px 0 1px;

margin:0;

font-size:12px; в форме шрифты масштабировать нужно аккуратно, в твоем случае лучше не масштабировать.

background:none;

}

Высоту инпутам не ставь! line-height тоже не ставь! Высоту делай так: задай размер шрифта, и потом регулируй высоту инпута верхним и нижним паддингами.

Чтобы в ие он не прыгал, его нужно флотнуть(тут можешь провести експеремент, не флотать, а задать vertikal-align:top; может поможет...)

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

кто учил задавать ширину в % и паддинги сбоку в пикселях?

padding:0 0 0 4px;

width:95%;

Edited April 23, 2010 by mishka2

[warobushek]

Спасибо, сейчас буду пробовать.

кто учил задавать ширину в % и паддинги сбоку в пикселях?

padding:0 0 0 4px;

width:95%;

.. да вот, в одной статейке почерпнул http://cssmake.ru/component/content/articl...s/108-css-input

P.S. косяк понял, исправлю, спс.

[Great Rash]

А вот я рекомендую не задавать паддинги инпуту. Лучше оберните его в див, к примеру, а паддинги задавайте уже диву. Тогда будет почти одинаково везде.

[warobushek]

Great Rash

почему?

[Great Rash]

Тогда будет почти одинаково везде.

[PoshtarBoba]

ИЕ как-то по-своему паддинги у инпута считает.

[mishka]

Нет, ребят, то вы просто както верстаете по своему

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>input</title>
	<style type="text/css">
		body{
			margin:0;
			font:12px/16px Arial,Helvetica,sans-serif;
		}
		#wrapper{padding:40px;}
		.box{
			width:148px;
			border:1px solid #000;
			text-align:center;
			line-height:20px;
			float:left;
		}
		input{
			font:14px Arial,Helvetica,sans-serif;
			width:140px;
			padding:2px 4px;
			border:1px solid #000;
			float:left;
			margin:0 1px 0 0;
		}
		.wrap{
			height:1%;
			overflow:hidden;
			padding:0 0 1px;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div class="wrap">
			<div class="box">шаблон</div>
		</div>
		<div class="wrap">
			<input type="text" value="Search" />
			<div class="box">шаблон</div>
		</div>
	</div>
</body>
</html>

[Great Rash]

Узкоспециализированное решение. А ну как мне понадобится <input> стопроцентной ширины? Что тогда делать прикажете? Нет уж, добавлять паддинги диву правильней.

И вообще я такого мнения, что любая форма должна быть "резиновой". А если нужна строго фиксированная ширина, то уж тогда ее (ширину) надо контейнеру задавать, хотя бы тому же <form>, который как раз блочный.

UPD: И без таблиц боле менее сложную форму не сделать...

[mishka]

Узкоспециализированное решение. А ну как мне понадобится <input> стопроцентной ширины? Что тогда делать прикажете? Нет уж, добавлять паддинги диву правильней.

И вообще я такого мнения, что любая форма должна быть "резиновой". А если нужна строго фиксированная ширина, то уж тогда ее (ширину) надо контейнеру задавать, хотя бы тому же <form>, который как раз блочный.

UPD: И без таблиц боле менее сложную форму не сделать...

редко попадаются случаи когда инпут нужен 100% ширины. Тогда конечно паддинг на блок.

Но я этим примером показал что никакие хаки и отдельные css для стилизации инпутов ненужны.

Насчет сложных форм и таблиц... все зависит от диза. Сложно спорить о чемто вымышленном.

Про резиновые формы - опять же все зависит от ситуации. Може у человека эта форма всегда будет такой как нарисованна, а ты ее сделаешь с кучей дивов и табличек.

[Great Rash]

Я просто сторонник универсальных решений, а не конкретных. Потом куски кода в других проектах проще юзать.