Wednesday, September 3, 2008

Search button and field alignmnet

CSS DOCUMENT

#email {

margin: 0px 2px;
width: 110px;
_width: 110px;
padding: 2px 2px 0 2px;
_padding-right: 18px;
height: 16px;
_height: 16px;
background-color: #FFF;
border: 1px solid #afa9a6;
-moz-box-sizing: content-box;
float:left;
font-size:10px;
}

.search { background-image:url(/images/layout/speedclub_signup.gif); }

button.icon-replace {
-moz-outline: none;
padding: 0;
border-style: none;
background-color: transparent;
background-repeat: no-repeat;
background-position: center center;
margin:0;
}

.icon-replace {
background-repeat: no-repeat;
background-position: center center;
display: inline;
display: inline-block;
display: -moz-inline-box;
_display: inline;
zoom: 100%;
width: 44px;
padding: 0 !important;
overflow: hidden;
white-space: nowrap;
text-align: left;
word-spacing: -2ex;
letter-spacing: -2ex;
min-height: 20px;
_height: 20px;
color: transparent !important;
_font: 1px/0 monospace;
_word-spacing: -2px;
_letter-spacing: -2px;
}



WITHIN HTML
<input name="email" id="email" class="speedclub_input" type="text">

<button type="submit" id="search-submit" class="icon-replace search"><span style="display: none;">Search</span></button>

No comments: