Проблема с вёрстокой для плашки поиска.
Здравствуйте, нужно реализовать панельку поиска.
Текстбокс + кнопка. Делаю так: <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, время: 13:47. |