Im working on my friends site and trying to style the ajaxsearch 1.7 componen.
www.activedesign.dk
But i can´t get the search field and my image button to be next to each other without a large space.
This is my css:
#ajaxSearch_form {
color: #444;
width: auto;
border: 1px solid #ddd;
height: 18px;
line-height: 18px;
}
#ajaxSearch_input {
width: auto;
border: 1px solid #444555;
display: inline;
height: 18px;
border-left-color: #c3c3c3;
border-top-color: #7c7c7c;
margin: 0 0 0 0;
padding: 0 0 0 0;
vertical-align: top;
}
#ajaxSearch_submit {
width: 21px;
height: 18px;
line-height: 18px;
}
#ajaxSearch_output {
width: 100px;
border: 1px solid #444;
padding: 10px;
background: #fff;
display: block;
height: auto;
vertical-align: top;
}
.ajaxSearch_paging {
}
.AS_ajax_result {
color: #444;
margin-bottom: 3px;
}
.AS_ajax_resultLink {
text-decoration: underline;
}
.AS_ajax_resultDescription{
color: #555;
}
.AS_ajax_more {
color: #555;
}
And this is how my form looks like with the added image button.
<form [+as.formId+]action="[+as.formAction+]" method="post">
<label for="ajaxSearch_input">
<input id="ajaxSearch_input" type="text" name="search" value="[+as.inputValue+]"[+as.inputOptions+] />
</label>
<label for="ajaxSearch_submit">
<input id="ajaxSearch_submit" TYPE="IMAGE" SRC="/assets/images/soeg.png" name="sub"/>
</label>
</form>
