Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Aligning Search box & button

Aligning Search box & button

Views: 914

Results 1 to 3 of 3
13 May 2014, 3:33 PM
#1
ktlr85 avatar

ktlr85

New Zenner

Join Date:
Jan 2014
Location:
United Kingdom
Posts:
7
Plugin Contributions:
0

Aligning Search box & button

Hi everyone,

Im having some trouble aligning my header search box with the css search button.

I think the problem Im having is that because my PHP skills are weak, I don't know where or how to insert an ID for the search button to allow me to add my CSS.

Below is the php code.

...
if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') {
    $content .= zen_draw_input_field('keyword', '', 'id="searchbar" size="6" maxlength="30" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . ' ' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);
  } else {
    $content .= zen_draw_input_field('keyword', '', 'size="6" class="search-header-box" maxlength="30" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . ' ' . zen_image_submit (BUTTON_IMAGE_SEARCH_HEADER,HEADER_SEARCH_BUTTON);
  }

  $content .= "</form>";
?>

Here is the link to my site. http://www.digitalinx.co.uk/online/

help appreciated - Thanks!

13 May 2014, 4:46 PM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Aligning Search box & button

You could add something like this to the stylesheet:

.button_search {margin: -.5em 0 0 0;}

13 May 2014, 5:31 PM
#3
ktlr85 avatar

ktlr85

New Zenner

Join Date:
Jan 2014
Location:
United Kingdom
Posts:
7
Plugin Contributions:
0

Re: Aligning Search box & button

thanks mate, yeah that has straightened it up.

and using a little \9 hack it also looks straight in IE now too, as it was all over the place!