Кроссбраузерность формы: как?

antifilter

antifilter

Постоялец
Регистрация
25 Сен 2007
Сообщения
308
Реакции
145
В Firefox форма поиска отображается так:
ff.png
В Opera она выглядит так:
op.png

Как добиться кроссбраузерности?
Спасибо за советы!.. Delk0, благодарю. Поправил.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.


Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
 
Следует как минимум выложить html код формы и ее css свойства.
 
Для input'a с вводом текста можно присвоить id и установить для него жесткий margin.
#textinput{
margin: 10px 0 0 20px
}
 
В вашем примере размер input-text превышает жестко заданную ширину div.sform, поэтому либо допиксельно подгонять сумму размеров инпутов к рамеру оборачивающего div-а, либо делать этот div резиновым, зависящим от size input-text, например так:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
	background:#fff;
	color:#000;
	font-family:arial,sans-serif;
	font-size:10px;
}
form {
	margin: 0;
	padding: 0;
}
.sform {
	display: inline-block;
	display: inline !ie;
	border: 1px solid #DDDDDD;
	background-color: #EEEEEE;
	background-image: url(../../images/search.png);
	background-position: 7px 12px;
	background-repeat: no-repeat;
	padding: 10px 10px 0 30px;
	zoom:1;
}
.sform div {
	margin: 5px;
	text-align: center;
}
.sform div span {
	padding-right: 20px;
}
.sform a {
	text-decoration: none;
	color: #000000;
	text-decoration: none;
	border-bottom: 1px dotted #000000;
}
input {
	background: #ddd;
	border: 1px solid #DDDDDD;
	color: #666666;
}
input.text {
	background: #fff;
}
</style>
</head>
<body>
<div class="sform">
	<form action="/blogs/show/" method="GET">
		<input type="text" name="search"  maxlength="64" size="55" value="{SEARCH_QUERY}" class="text"> 
		<input type="submit" value=" &crarr; ">
	</form>
	<div><span>Например, <a href="/">интересные новости</a></span></div>
</div>
</body>
</html>
ps// да, и IE всех версий не очень дружит с тем набором спецсомволов, один из которых у вас на кнопке..
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху