Textpattern CMS

#1 2006-07-31 22:57:40

deronsizemore

Member

From: Kentucky

Registered: 2005-11-02

Posts: 324

Search "Go" button. Can't add space between the button and text field

The site is www.kentuckygolfing.com

I’m trying to get a little bit of space/padding between the “go” button/icon and the actual seach box. in FireFox it displays correctly and in IE it doesn’t (imagine that). I’ve added padding to everything that I think could be doing it, and nothing. Can someone help?

this is my HTML:

<code>
<form action=”<txp:site_url />” method=“get”>
<fieldset id=“search”>
<legend>Search</legend>
<label for=“query” class=“magnifyingglass”>Search</label>
<input id=“query” name=“q” size=“11” type=“text” value=”“ />
<button type=“submit”>Search!</button>
</fieldset>
</form>
</code>
<br />
CSS:

<code>
#search {
border: 0;
}
#search button {
width: 19px;
height: 19px;
border: 0;
background: url(/images/gobutton.gif) no-repeat 0 50%;
cursor: pointer;
padding-left: 2px;
}
#search legend,#search button {
/*hide the legend and button text */
text-indent: -9999px;
}
#search legend {
position: absolute;
}
.magnifyingglass {
background: url(/images/magnifyingglass.gif) no-repeat 0 50%;
height: 8px;
width: 8px;
padding-left: 12px;
}
</code>

#2 2006-08-01 00:27:56

jm

Plugin Author

From: Missoula, MT

Registered: 2005-11-27

Posts: 1,746

Website

Re: Search "Go" button. Can't add space between the button and text field

Have you tried #search input { margin-right: 2px; } or #search button { margin-left: 2px }?

[edit]: Just tested it with the IE Dev Toolbar. Either way works.

Also, you could cut down on your HTML with descendant selectors. Instead of .magnifyingglass, you could use

<code>
#search label {
padding-left: 8px;
background: ….;
}
</code>

Last edited by deldindesign (2006-08-01 00:33:20)

---

What? My name is… | GitHub

#3 2006-08-01 01:07:13

deronsizemore

Member

From: Kentucky

Registered: 2005-11-02

Posts: 324

Re: Search "Go" button. Can't add space between the button and text field

Ah, thanks for you help on those issue! I didn’t want to use the .magnifyingglass, but I wasn’t sure of another way. :-)