Quicksearch submit image problem.

[KuJoe]

So I'm trying to add a button to the quicksearch feature built into my template (no button originally, the "button" is actually part of the background image) but the problem is that I am trying to use an image as a button and it's not working. You can see what I mean at the top right of my theme @ http://www.jmd.cc. I want to have the image at the default size (23x23) and I want to have it next to the Quicksearch... field as closely over the background image as possible.

What am I doing wrong? I'm guessing it has to do with the DIV tags but I suck at CSS.

Code: Select all

<div id="searchbar"><form id="searchformheader" action="http://www.jmd.cc/" method="get"><input type="hidden" name="serendipity[action]" value="search" /><input alt="Quicksearch" type="text" name="serendipity[searchTerm]" value="Quicksearch..." onFocus="if(this.value=='Quicksearch...')value=''" onBlur="if(this.value=='')value='Quicksearch...';"><input type="image" value="search" src="http://www.jmd.cc/templates/translucency/img/transred/search.gif" width="23" height="23"></form></div>

[garvinhicking]

Hi!

I would assign a unique ID to the input search form element. And then make sure you use CSS to address the "width" thing, because there's a default rule in your CSS stylesheets that makes every input element to 150px (s9y does that for the usual categories and other sidebar input buttons to have the same length.

HTH,
Garvin

[KuJoe]

Ok, am I on the right track?

Code: Select all

<div id="searchbar"><form id="searchformheader" action="http://jmd.cc/" method="get"><input type="hidden" name="serendipity[action]" value="search" /><input alt="Quicksearch" type="text" name="serendipity[searchTerm]" value="Quicksearch..." onFocus="if(this.value=='Quicksearch...')value=''" onBlur="if(this.value=='')value='Quicksearch...';">
</div><div id="searchbut"><input type="image" value="submit" src="http://www.jmd.cc/templates/translucency/img/search.gif" width="23" heigh="23" border="0"></div>
</form>

Code: Select all

#searchbut {
margin-right:12px;
float:right;
width:23px;
height:23px;
}

[garvinhicking]

Hi!

No, you should use <input type="image" id="searchbut" /> -- better to put the CSS on the input field itself, not a wrapping div.

Regards,
Garvin

[KuJoe]

Ok, I tried that and this is what I have now:

Code: Select all

<div id="searchbar"><form id="searchformheader" action="http://jmd.cc/" method="get"><input type="hidden" name="serendipity[action]" value="search" /><input alt="Quicksearch" type="text" name="serendipity[searchTerm]" value="Quicksearch..." onFocus="if(this.value=='Quicksearch...')value=''" onBlur="if(this.value=='')value='Quicksearch...';"></div><input type="image" id="searchbut" src="http://www.jmd.cc/templates/translucency/img/search.gif" border="0"></form>

I've determined that this is causing the image to stretch:

Code: Select all

#searchformheader input {

	margin-top:8px;

	border: 0px solid #aaa;

	height:17px;

	width:122px;

	font-size: 1.1em;

	vertical-align:left;

	color: #999;

	}

But if I adjust the settings it alters the text input field.

[KuJoe]

Ok, I figured out what you were saying. I am so close, just need to figure out how to get the input field aligned with the image.

Code: Select all

<div id="searchbar"><form action="http://jmd.cc/" method="get"><input type="hidden" name="serendipity[action]" value="search" /><input id="searchformheader" alt="Quicksearch" type="text" name="serendipity[searchTerm]" value="Quicksearch..." onFocus="if(this.value=='Quicksearch...')value=''" onBlur="if(this.value=='')value='Quicksearch...';"><input type="image" id="searchbut" src="http://www.jmd.cc/templates/translucency/img/search.gif" border="0"></form></div>

Code: Select all

/* style for quicksearch form in header */

#searchbar {
	margin-top:6px;

	margin-right:12px;

	float:right;

	width:175px;

	height:40px;

	}



#searchformheader {

	padding-right:12px;

	border: 0px solid #aaa;

	height:17px;

	width:120px;

	font-size: 1.1em;

	vertical-align:right;

	color: #999;

	}



#searchformheader input {

	margin-top:8px;

	border: 0px solid #aaa;

	height:17px;

	width:122px;

	font-size: 1.1em;

	vertical-align:left;

	color: #999;

	}

	

#searchbut {

	padding-left:2px;

	vertical-align:right;

	width:23px;

	height:23px;

	}

[garvinhicking]

Hi!

Why do you assign CSS to the input element? You have a unique ID #searchbut that you need to directly assign.

You could use CSS like "display: block; position: absolute; left: XXXpx; top: XXXpx" to position it absolutely...

Regards,
Garvin

[KuJoe]

Thanks for your help, as you can tell I am horrible with CSS and don't really understand what you're saying fully but luckily I have everything setup to a point I can live with. Worse comes to worse I can revert all of my changes if needed.