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

Тема в разделе "Веб-дизайн", создана пользователем antifilter, 6 фев 2011.

Модераторы: zek24
  1. antifilter

    antifilter

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

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

    <form action="/blogs/show/" method="GET">
    <input type="text" name="search" size="55" maxlength="64" value="{SEARCH_QUERY}">
    <input type="submit" value=" &crarr; ">
    </form>
    Например, <a href="/">интересные новости</a>
    </div>

    .sform {
    float: right;
    width: 400px;
    border: 1px solid #DDDDDD;
    background-color: #EEEEEE;
    text-align: center;
    background-image: url(../../images/search.png);
    background-position: 5px 12px;
    background-repeat: no-repeat;
    font-size: 10px;
    }

    .sform a {
    text-decoration: none;
    color: #000000;
    text-decoration: none;
    border-bottom: 1px dotted #000000;
    }

    input {
    margin-top: 10px;
    margin-bottom: 0px;
    border: 1px solid #DDDDDD;
    color: #666666;
    }
     
  2. Delk0

    Delk0

    Регистр.:
    26 мар 2010
    Сообщения:
    284
    Симпатии:
    47
    Следует как минимум выложить html код формы и ее css свойства.
     
  3. Delk0

    Delk0

    Регистр.:
    26 мар 2010
    Сообщения:
    284
    Симпатии:
    47
    Для input'a с вводом текста можно присвоить id и установить для него жесткий margin.
    #textinput{
    margin: 10px 0 0 20px
    }
     
  4. Djutan

    Djutan Создатель

    Регистр.:
    29 янв 2011
    Сообщения:
    21
    Симпатии:
    8
    В вашем примере размер 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 всех версий не очень дружит с тем набором спецсомволов, один из которых у вас на кнопке..
     
    antifilter нравится это.