Although I typically avoid using tables, I am struggling to find a better solution for setting up a page layout with a search bar, three buttons, and two hyperlinks stacked on top of each other. The challenge is to have this control centered on the webpage.
The issue arises when trying to position the hyperlinks without using a table. Safari and Chrome do not render the layout correctly, unlike IE and Firefox which center everything as expected. In Safari and Chrome, the table containing the hyperlinks is pushed to the left side of the page.
I would appreciate any suggestions on how to achieve the desired layout or resolve the rendering problem in Safari/Chrome.
Code below
html
<div id="search" class="searchcontainer">
<asp:TextBox ID="tbsearchterm" CssClass="watermark" runat="server" OnTextChanged="tbsearchterm_TextChanged" />
<div class="buttons">
<asp:LinkButton runat="server" Text="Search" class="button search-big" ID="btnSearch"
OnClick="btnSearch_Click" />
<asp:LinkButton runat="server" Text="Fx" class="button left big" ID="btnOperators" />
<asp:LinkButton runat="server" Text="Save" class="button right big" ID="btnSave" />
</div>
<table id="searchoptions">
<tr>
<td>
<a href="#" id="btnAdvanceSearch">Advanced Search</a>
</td>
</tr>
<tr>
<td>
<a href="#" id="btnFilters">Filters</a>
</td>
</tr>
</table>
</div>
CSS
.searchcontainer
{
min-width:840px;
display:inline;
position:relative;
padding-top:20px;
margin-left:auto;
margin-right:auto;
}
#searchoptions
{
display:inline;
text-align:left;
font-size:.8em;
width:100px;
padding:0px;
vertical-align:top;
position:relative;
margin:0px;
}
#tbsearchterm {
width:470px;
height:32px;
text-align:left;
padding-left:10px;
padding-right:10px;
font-size: 1.3em;
border:1px solid #cccccc;
-khtml-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
Any tips or suggestions would be greatly appreciated!
Update This control utilizes jQuery to hide certain elements upon page load. As a result, using float is not practical. Even when some elements are hidden, the control still does not align properly but rather shifts to the left. Thus, I need to keep using display:inline for the nested elements within the main container ("searchcontainer").