Layout of Search on Header

[schwarzes]

Hello, I am using the iC-AthemeV1.3F theme and I moved the search box into the header, but the search box and the search button is not displayed in the same line.

here is the website.

http://myfancydressshop.co.uk/

And here is the code of the file tpl_search_header.php

<?php
/**
 * Side Box Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_search_header.php 4142 2006-08-15 04:32:54Z drbyte $
 */
  $content = "";
  $content .= zen_draw_form('quick_find_header', zen_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get');
  $content .= zen_draw_hidden_field('main_page',FILENAME_ADVANCED_SEARCH_RESULT);
  $content .= zen_draw_hidden_field('search_in_description', '1') . zen_hide_session_id();
  if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'no') {
    $content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" 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 . '\';"') . '&nbsp;' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);
  } else {
    $content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 150px; height: 20px" 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 . '\';"') . '&nbsp;&nbsp;&nbsp;<input type="image" src="http://myfancydressshop.co.uk/images/search_button.gif" value="" />';
  }
  
  $content .= "</form>";
?>

[gjh42]

Add to your stylesheet

#taglineWrapper form input+input+input+input+input {position: relative; bottom: -0.5em;}

[schwarzes]

Add to your stylesheet

#taglineWrapper form input+input+input+input+input {position: relative; bottom: -0.5em;}

No effect, still the same.

[gjh42]

What browser/version are you using? It worked when I tested it on your site in Firefox.

[stevesh]

glenn's solution worked for me in Firefox, but only once. When I returned, it was out of whack again.

I have done something like this, but I'm not sure if it will mes up any other input boxes:

#taglineWrapper form input {float:left;}

[gjh42]

Yes, very odd. Apparently when you first look at the page, there are five inputs in that form including hidden ones, but when you refresh there are only four inputs (the number that the code indicates there should be). The pure CSS solution won't work here; you will have to edit the code and add a class to the button, something like this:

  if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'no') {
    $content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" 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 . '\';"') . '&nbsp;' . '<span class="headerSearchButton">' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON) . '</span>';
  } else {
    $content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 150px; height: 20px" 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 . '\';"') . '&nbsp;&nbsp;&nbsp;<input class="headerSearchButton" type="image" src="http://myfancydressshop.co.uk/images/search_button.gif" value="" />';
  } 

Add the parts in red:

. '<span class="headerSearchButton">' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON) . '</span>';

<input class="headerSearchButton" type="image" src="http://myfancydressshop.co.uk/images/search_button.gif" value="" />';

Then you can style
.headerSearchButton {position: relative; bottom: -0.5em;}.