Форум PHP программистов > Кривота инпутов

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Эли4ка

31.08.2011 - 12:20

Ребята подскажите пожалуйста где может быть проблема?вроде все поставила верно..валидаторы ни одной ошибки не показывают а все равно криво(посмотрите в браузере хром и мозилла)

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">               
        <style type="text/css">
.bt {
    height: 29px;
    color: #666;
    font-size: 18px;
    padding:3px;
    
    background: #f9f9f9;
}
#box .bt {
    background: -moz-linear-gradient(top,  #fff,  #f3f3f3);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));

    /* For Internet Explorer 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f3f3f3);
    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f3f3f3)";
}
#box .bt:hover {
    background: #f3f3f3;
    background: -moz-linear-gradient(top,  #fff,  #e9e9e9);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e9e9e9));

    /* For Internet Explorer 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#e9e9e9);
    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#e9e9e9)";
}
#box .bt:active, .clicked {
    background: #e9e9e9;
    background: -moz-linear-gradient(top,  #e9e9e9,  #fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#fff));

    /* For Internet Explorer 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e9e9e9, endColorstr=#ffffff);
    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#e9e9e9, endColorstr=#ffffff)";
}
.btmiddle {
    border: 1px solid #e3e3e3;
    border-width: 1px 0;
    margin: 0 -4px;
}            
.btright {
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 0 .5em .5em 0;
    -moz-border-radius: 0 .5em .5em 0;
    border-radius: 0 .5em .5em 0;
}
.registration {
                font-family: "Trebuchet MS";
                font-size: 18px;
                
                width:370px;
                border:1px solid #cccccc;
                margin:2px 0px 4px 2px;
                color:#000000;
                height:29px;
                padding:3px;
            }
.registration:focus, .registration:focus{
                background-color:#f9f9f9;
            }
</style>
</head>
<body>
<form>
<div id="box">   
<input  class="registration" type="text" maxlength="70"/>
<input  class="bt btmiddle"  type="submit" value="Им"/>
<input  class="bt btright" type="submit" value="Поиск"/>
</div>
</form>
</body>
</html>

Спустя 2 часа, 19 минут, 55 секунд (31.08.2011 - 13:40) Xes написал(а):

Что именно криво то? Единственное текстовый инпут чуть больше по высоте.

Спустя 55 минут, 6 секунд (31.08.2011 - 14:35) Эли4ка написал(а):

Xes
да..а как мне кнопки по высоте такими же как и текстовой инпут сделать?вроде все верно но криво..

Спустя 10 минут, 47 секунд (31.08.2011 - 14:46) bodja написал(а):

Попробуйте вот так,на хроме не проверял - нету.
здессь ссылка еще

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">               
        <style type="text/css">
.bt {
    height: 29px;
    color: #666;
    font-size: 18px;
    background: #f9f9f9;
}
#box .bt {
    background: -moz-linear-gradient(top,  #fff,  #f3f3f3);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));

    /* For Internet Explorer 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f3f3f3);
    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f3f3f3)";
}
#box .bt:hover {
    background: #f3f3f3;
    background: -moz-linear-gradient(top,  #fff,  #e9e9e9);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e9e9e9));

    /* For Internet Explorer 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#e9e9e9);
    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#e9e9e9)";
}
#box .bt:active, .clicked {
    background: #e9e9e9;
    background: -moz-linear-gradient(top,  #e9e9e9,  #fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#fff));

    /* For Internet Explorer 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e9e9e9, endColorstr=#ffffff);
    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#e9e9e9, endColorstr=#ffffff)";
}
.btmiddle {
    border: 1px solid #e3e3e3;
	vertical-align:bottom;
	margin: 0 -4px;
	padding:0 5px 3px 5px;
}            
.btright {
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 0 .5em .5em 0;
    -moz-border-radius: 0 .5em .5em 0;
    border-radius: 0 .5em .5em 0;
	vertical-align:bottom;
	padding:0 5px 3px 5px;
}
.registration {
                height:25px;
                font-family: "Trebuchet MS";
                font-size: 18px;
                width:370px;
                border:1px solid #cccccc;
                color:#000000;
            }
.registration:focus, .registration:focus{
                background-color:#f9f9f9;
            }
</style>
</head>
<body>
<form>
<div id="box">   
<input  class="registration" type="text" maxlength="70" />
<input  class="bt btmiddle"  type="submit" value="Им"/>
<input  class="bt btright" type="submit" value="Поиск"/>
</div>
</form>
</body>
</html>

Спустя 29 минут, 5 секунд (31.08.2011 - 15:15) Эли4ка написал(а):

спасибо..но немного не так..да я сама разобралась..

Быстрый ответ:

Здесь расположена полная версия этой страницы.