Проблема с вёрстокой для плашки поиска.
Здравствуйте, нужно реализовать панельку поиска.
Текстбокс + кнопка. Делаю так: <div style="position: relative; top: 10px; right: 400px;"> <asp:TextBox ID="FindTextBox" CssClass="findTextBox" runat="server" /> <asp:Button ID="FindButton" CssClass="findButton" OnClick="FindButton_Click" runat="server" /> </div>
.findTextBox
{
width: 155px;
height: 19px;
border: 0px;
-moz-border-radius: 100px 0px 0px 100px;
-webkit-border-radius: 100px 0px 0px 100px;
border-radius: 100px 0px 0px 100px;
-khtml-border-radius: 100px 0px 0px 100px;
behavior: url(../Hack/PIE.htc);
padding-left: 9px;
background: url('/images/searchTextBox.png') repeat-y right;
display: inline-block;
position: relative;
}
.findButton
{
background-image: url('/images/serchbutton.png');
width: 25px;
height: 22px;
border: 0px;
cursor: pointer;
overflow: hidden;
position: relative;
background-position: center top;
display: inline-block;
cursor: hand;
right: 5px;
}
Но есть большие проблемы с вёрсткой текстбокс + кнопка под разные браузеры. То по вертикали, то по горизонтали кнопка гуляет. Подскажите советом, как можно решить эту пробему? |
Цитата:
|
Что для вас означает нормальный пример?
|
Цитата:
- скопировал - вставил в файл - запустил его в браузере и все увидел |
Антипример. :D Типа твоего...
Помогите мне сверстать вот эту небольшую страничку... У меня там что-то съезжает (на самом деле нет :D )
Class wrk.ZEN.Find Extends %ZEN.Component.page
{
/// Имя приложения, которому принадлежит эта страница.
Parameter APPLICATION;
/// Отображаемое имя для нового приложения.
Parameter PAGENAME;
/// Домен, используемый для локализации.
Parameter DOMAIN;
/// This Style block contains page-specific CSS style definitions.
XData Style
{
<style type="text/css">
/* default styles */
.b {
background-color:#DCDCDC;
}
</style>
}
/// This XML block defines the contents of this page.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page enclosingClass="b" xmlns="http://www.intersystems.com/zen" title="">
<html>
<h3>Полнотекстовый поиск по выполненным работам</h3>
</html>
<hgroup >
<text size="100" id="find" />
<button caption="Найти" onclick='zenPage.Find(); zenPage.Find()' />
</hgroup>
<spacer height="10" />
<tableNavigatorBar tablePaneId="table" />
<tablePane
valueColumn="ID"
id="table"
sql=""
rowSelect="true"
pageSize="25"
useSnapshot="true"
useKeys="true"
ondblclick='zenPage.Select(zenThis.getValue("ID"))'
>
<column colName="ID" hidden="true" />
<column colName="job" header="Работа" width="30%" />
<column colName="who" header="Исполнитель" width="10%" />
<column colName="vers" header="Версия" width="5%" />
<column colName="txt" header="Описание" />
</tablePane>
</page>
}
Method Select(Id) [ Language = javascript ]
{
top.location= 'wrk.ZEN.StageEdit.cls?id='+Id
}
Method Find() As %Status [ ZenMethod ]
{
set text= ..%GetComponentById("find")
set text= text.value
quit:text="" $$$OK
set str= ""
for i=1:1:$L(text," ") set str=str_"'"_$P(text," ",i)_"'"_","
set $E(str,$L(str),$L(str))=""
set sql="select ID,Job->Name as job,Member->Name as who, vers->Name as vers, Text as txt from wrk.Stage where Text %CONTAINSTERM ("_str_")"
set table= ..%GetComponentById("table")
set table.sql= sql
&js<zenPage.Refresh()>
quit $$$OK
}
Method Refresh() [ Language = javascript ]
{
this.getComponentById("table").executeQuery()
}
}
|
<!DOCTYPE>
<head>
<title>Активные темы</title>
<style type="text/css">
#ServSearch {
position: relative;
z-index:1000;
height:32px;
top: 10px;
left:50%;
margin-left:300px;
border:red 1px solid;
width:300px;
}
.findTextBox
{
width: 155px;
height: 19px;
border: 0px;
-moz-border-radius: 100px 0px 0px 100px;
-webkit-border-radius: 100px 0px 0px 100px;
border-radius: 100px 0px 0px 100px;
-khtml-border-radius: 100px 0px 0px 100px;
behavior: url(../Hack/PIE.htc);
padding-left: 9px;
background: url('/images/searchTextBox.png') repeat-y right;
display: inline-block;
}
.findButton
{
background-image: url('/images/serchbutton.png');
width: 25px;
height: 22px;
border: 0px;
cursor: pointer;
overflow: hidden;
background-position: center top;
display: inline-block;
cursor: hand;
right: 5px;
}
</style>
</head>
<body style="width:100%;">
<div id=ServSearch style="">
<asp:TextBox ID="FindTextBox" CssClass="findTextBox" runat="server" />
<asp:Button ID="FindButton" CssClass="findButton" OnClick="FindButton_Click" runat="server" />
</div>
</body>
</html>
|
Сейчас покажу ка ОНО работает
|
ksa, Не разобрался, не нужно критиковать :)
Deff, не помогло, спасибо всё равно |
Цитата:
|
<htmL>
<head>
<style type="text/css">
.findButton
{
background-image: url('/images/serchbutton.png');
width: 25px;
height: 22px;
border: 0px;
cursor: pointer;
overflow: hidden;
position: relative;
background-position: center top;
display: inline-block;
cursor: hand;
right: 5px;
}
.findTextBox
{
width: 155px;
height: 19px;
border: 0px;
-moz-border-radius: 100px 0px 0px 100px;
-webkit-border-radius: 100px 0px 0px 100px;
border-radius: 100px 0px 0px 100px;
-khtml-border-radius: 100px 0px 0px 100px;
behavior: url(../Hack/PIE.htc);
padding-left: 9px;
background: url('/images/searchTextBox.png') repeat-y right;
display: inline-block;
position: relative;
}
#header_over
{
margin: 0 auto;
height: 118px;
width: 980px;
}
</style>
</head>
<body>
<div id="header_over">
<div style="position: relative; top: 10px; right: 400px;">
<input type="Text" ID="FindTextBox" CssClass="findTextBox" />
<input type="SUBMIT" ID="FindButton" CssClass="findButton" />
</div>
</div>
</body>
</html>
Добавил в класс: vertical-align: middle; Стало лучше, но в IE 8 и в Опере кнопка чуть выше инпута на несколько пикселей |
| Часовой пояс GMT +3, время: 22:21. |