header search input padding tweaks

Hi all, I've been fiddling with this site for a while and would appreciate a little help with some tweaking. I'm using a customized version of the mostlygrey template, which is based off the barebones template.

you can find my test site at w w w . t i f f s t r i n k e t s . c o m / f r d t e s t (sorry I don't want it indexed as this is just a test)

I'm trying to adjust the padding of the search button in the header search; I managed to figure out how to move the whole form to the right hand side instead of the left with a float:right, but I can't quite figure out how to adjust the padding of the button itself.

I'm trying to even out the spacing and align it so it doesn't look quite so... lopsided. I think padding is the issue, but if it's not I'd be happy to be corrected :D I can usually manage all right with css, or well enough to get things done, but this one is eluding me!!

thanks in advance for any input, everyone! :)

The only difference I can see between your site, with the alignment problem, and mine, where the same bits align properly, is that your search box and button are directly inside #navMainSearch>form whereas mine are inside #navMainSearch>forward>form.

(By "inside" I mean the path of the cascade which defines the styles that are applied, which I can see when I View Style Information using the Web Dev tools in Firefox.)

So the question is: what happened to the "forward" part of the code, which is default to Zen Cart? Especially since forward, in the default ZC stylesheet.css, already has the float: right defined, which you say you had to add. Actually, float: right is the only thing that is defined under "forward" so I don't know why its lack would cause a misalignment. But it's the only difference I can see.

In short, I'm as puzzled as you are.

Rob

It's entirely possible, nay, likely, that I messed something up when I was trying to get the header slideshow and overlay to line up properly. I did a lot of trial and error hacking to get it the way I wanted, and may have forgotten to change something back to the original way it was in the process.

My guess is that it has something to do with the tpl_header.php file because that was the main victim of my tinkering in that area. It's also a possibility that I removed something from the stylesheet.css file with my tinkering. I don't, however, remember ever editing anything with 'forward' in it... :blink:

You'll have to forgive me, I'm not exactly apt when it comes to any of the coding, I still have very limited knowledge about how to edit properly :P I'll have to go and take a look at all of the base files and see if I've buggered it up...

Hi Rob,

Well, I'm not surprised, but I can't figure out what's wrong. I've used winmerge to compare all the base template files (and the template default files) that I've edited and the only things I can find different with mine are the basic css edits I've made regarding colours, some padding/margin changes, etc... plus the overlay that I added in. I can't see anything glaringly obvious that looks wrong, and I'm officially out of ideas :dontgetit

I think I'll include some of the relevant code for any and all who may be able to help...

Here is the tpl_header file.

<?php
/**
 * Common Template - tpl_header.php
 *
 * this file can be copied to /templates/your_template_dir/pagename<br />
 * example: to override the privacy page<br />
 * make a directory /templates/my_template/privacy<br />
 * copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br />
 * to override the global settings and turn off the footer un-comment the following line:<br />
 * <br />
 * $flag_disable_header = true;<br />
 *
 * @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: J_Schilz for Integrated COWOA - 14 April 2007
 */
?>
<script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script> 
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
<?php
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']));
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message']);
} else {

}
?>
<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>
<div id="headerWrapper">
<!--bof-navigation display-->
  <div id="navMainWrapper">
    <div id="navMain">
    <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
<?php if (!($_SESSION['COWOA'])) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li><?php } ?>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
    </div>
    <div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?>
    </div>
 <br class="clearBoth" />
  </div>
<!--eof-navigation display-->
<!--bof-branding display-->
  <div id="logoWrapper">
    <div id="navmainoverlay"><img src="includes/templates/mostlygrey/images/galleryoverlay.png"></div>
  <div id="myGallery">		
	<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false,
showInfopane: false
});
}
window.addEvent('domready', startGallery);
</script> 	 
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="mypage1.html" title="open image" class="open"></a>
<img src="images/brugges2006/1.jpg" class="full" />
<img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="mypage2.html" title="open image" class="open"></a>
<img src="images/brugges2006/2.jpg" class="full" />
<img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
</div></div>
  <div id="logo"> 
<?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
 </div> 
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<!--eof-branding display-->
<!--eof-header logo and navigation display-->
<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->
<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->
</div>
<?php } ?>

And for good measure here is the css stylesheet.

/**
 * Main CSS Stylesheet
 *
 * @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: stylesheet.css 4387 2006-09-04 13:54:28Z drbyte $
 */

body {
	margin: 0;
	font-family: palatino linotype, book antiqua, palatina, georgia, times new roman, serif;
	font-size: 100%;
	line-height: 140%;
	color: #F1F1E1;
	background-color: #111;
}

a img {border: none; }

a {
	color: #bc5857;
	text-decoration: none;
}
a:visited {
	color: #962f2f;
	text-decoration: none;
}
a:hover {
	color: #F1F1E1;
	text-decoration: underline;
}
h2, h3, h4, h5, h6 {
	/*font-family: georgia;*/
	color: #F1F1E1;
}
h1 {
	margin: 0px 0px 15px 0px;
	/*text-align: center;*/
	font: 140% georgia, helvetica, sans-serif;
	color: #F1F1E1;
	letter-spacing: 2px;
	font-variant: small-caps;
	/*border-bottom: 1px solid #000;*/
	/*clear: both;*/
}
h2 {
	font-size: 130%;
	margin: 0;
}
h3 {
	font-size: 100%;
}
p, ul, ol {
	margin: 0 0 1.5em 0;
}
/*wrappers - page or section containers*/
#mainWrapper {
	background-color: #212121;
	text-align: left;
	width: 750px;
	/*max-width: 1000px;*/
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
}
#headerWrapper {
}
#MainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
}
#logoWrapper{
    margin: .5em;
	max-height: 150px;
	}
	#logo {
width: 100%;
text-align: center;
display: none;
}
	#navmainoverlay{
	position: relative;
	margin: 0px;
	z-index: 1000;
	}
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
} 
#navColumnOneWrapper, #navColumnTwoWrapper {
	margin: 0 0.5em;
}
	
#tagline {
	/*padding: 1em 0 0 0;*/
	text-align : center;
	color: #ccc;
	font-style: italic;
}

#sendSpendWrapper {
	border: 1px solid #cacaca;
	float: right;
	margin: 0em 0em 1em 1em;
}

.floatingBox, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
	margin: 0;
	width: 47%;
}

.wrapperAttribsOptions {
	margin: 0.3em 0em;
}

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}

.navNextPrevCounter {
	margin: 0em;
}
.navNextPrevList {
	display: inline;
	white-space: nowrap;
	margin: 0;
	padding: 0.5em 0em;
	list-style-type: none;
}

#navMainWrapper/*, #navSuppWrapper, #navCatTabsWrapper*/ {
	margin: 0;
	padding: 0.25em 0;
	height: 25px;
	background-color: #212121;
	/*border-bottom: 1px solid #222;*/
}
#navCatTabsWrapper {
	background-color: #333;
	/*display: none;*/
	border-top: 1px solid #222;
}
#navMain {
	margin-top: 0px;
	background: #212121;
}
#navMain ul, #navSupp ul, #navCatTabs ul {
	margin: 0 .5em 0 .5em;
	padding: 0;
	list-style-type: none;
	position: relative;
	text-align: center;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
	display: inline;
	position: relative;
}

#navMain ul li a /*, #navSupp ul li a*/ {
	padding: 0.15em 0.2em;
	margin: 0;
	background-color: #111;
	color: #F1F1E1;
	/*border-left: 1px solid #222;
	border-right: 1px solid #222;
	border-bottom: 1px solid #222;*/
	border:2px solid #bc5857;
}

#navMain ul li a:hover/*, #navSupp ul li a:hover, #navCatTabs ul li a:hover*/ {
	background-color: #000;
	color: #bc5857;
}

#navEZPagesTOCWrapper {
	font-weight: bold;
	float: right;
	height: 1%;
	border: 1px solid #9a9a9a;
}

#navEZPagesTOC ul {
	margin: 0;
	padding: 0.5em 0em;
	list-style-type: none;
	line-height: 1.5em;
}

#navEZPagesTOC ul li {
	white-space: nowrap;
}

#navEZPagesTOC ul li a {
	padding: 0em 0.5em;
	margin: 0;
}

#navMainSearch/*, #navCategoryIcon, .buttonRow, #indexProductListCatDescription */{
	/*margin: 0.5em;*/
	float: right;
}

#navBreadCrumb {
	background-color: #333;
	padding: .1em .25em;
	border: 1px solid #222;
	font-variant: small-caps;
	font-weight: bold;
}

#navEZPagesTop {
	background-color: #111111;
	margin: 0.5em;
	padding: 0.2em;
	border-top: 1px solid #222;
	text-align: center;
}

#navColumnOne, #navColumnTwo {
	background-color: transparent;
}
code {
	/*font-family: arial, verdana, helvetica, sans-serif;*/
}

form, select {
	display: inline;
	margin: 0.1em;

}

textarea {
	margin: auto;
	padding: 0 3px;
	width: 100%;
	background-color: #555;
	border: 1px solid #222;
	color: #F1F1E1;
	font: inherit;
}
fieldset {
	padding: 0.5em;
	margin: 0.5em 0em;
	border: 1px solid #222;
}

legend {
	font-weight: bold;
	padding: 0.3em;
}

label, h4.optionName {
	line-height: 1.5em;
	padding: 0.2em;
}

label.checkboxLabel, label.radioButtonLabel {
	margin: 0.5em 0.3em;
}

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float: left;
}
input {
	width: auto !important;  /*hack for Zen Cart resizing buttons, grr */
    }
input[type="text"], input[type="password"] {
	background-color: #555;
	border: 1px solid #222;
	font: inherit;
	color: #F1F1E1;
	padding: 2px 3px;
	margin: 2px 0;
	max-width: 258px;
}

label.inputLabel {
	width: 9em;
	float: left;
}

label.inputLabelPayment {
	width: 14em;
	float: left;
	padding-left: 2.5em;
}

label.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
	width: 11em;
	float: left;
}

#checkoutPayment LABEL.radioButtonLabel {
	font-weight: bold;
}

address {
	padding: 0.5em;
}

address {
	font-style: normal;
}

.clearBoth {
	clear: both;
}

hr {
	height: 1px;
	margin-top: 0.5em;
	border: none;
	border-bottom: 1px solid #222;
}

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
	padding: .2em .5em;
	border: 1px solid #000;
}

.messageStackWarning, .messageStackError {
	background-color: #ff9;
	color: #c00;
	padding: 0 .5em;
	margin-bottom: .5em;
}
.messageStackWarning img, .messageStackError img, .messageStackSuccess img, .messageStackCaution img {
	display: none;
}
.messageStackSuccess {
	background-color: #9f9;
	color: #070;
}

.messageStackCaution {
	background-color: #FFFF66;
	color: #000000;
}

/*The main content classes*/
#navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
	vertical-align: top;
}

/*.content,*/ #productDescription, .shippingEstimatorWrapper {
	/*padding: 0.5em;*/
}
.alert {
	color: #f99;
}
.advisory {}
.important {
	font-weight: bold;
}
.notice {}
.rating{}
.gvBal {
	float: right;
}
#bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
	/*padding: 0.8em;*/
}
.centerColumn {
	padding: 3px;
}
.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
}

/*Shopping Cart Display*/
#cartAdd {
	float: right;
	text-align: center;
	/*border: 1px solid #000;*/
	padding: .25em;
}

.tableHeading th {
	border-bottom: 1px solid #222;
}

.tableHeading, #cartSubTotal {
	background-color: #333;
}

#cartSubTotal {
	border-top: 1px solid #222;
	font-weight: bold;
	text-align: right;
	line-height: 2.2em;
	padding-right: 2.5em;
}

.tableRow, .tableHeading, #cartSubTotal {
	/*height: 2.2em;*/
}

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
	padding: 0.5em 0em;
}

.cartUnitDisplay, .cartTotalDisplay {
	text-align: right;
	padding-right: 0.2em;
}

#scUpdateQuantity {
	width: 2em;
}

.cartQuantity {
	width: 4.7em;
}

.cartNewItem {
	color: #33CC33;
	position: relative;  /*do not remove-fixes stupid IEbug*/
}

.cartOldItem {
	position: relative;  /*do not remove-fixes stupid IEbug*/
}

.cartBoxTotal {
	text-align: right;
	font-weight: bold;
}

.cartRemoveItemDisplay {
	width: 3.5em;
}

.cartAttribsList {
	margin-left: 1em;
}

#mediaManager {
	width: 50%; 
	margin: 0.2em;
	padding: 0.5em;
	background-color: #333;
	border: 1px solid #222;
}

.normalprice, .productSpecialPriceSale {
	text-decoration: line-through;
}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
	/*color: #ff0000;*/
	font-weight: bold;
}

.orderHistList {
	margin: 0 1em;
	padding: 0.2em 0em;
} 

#cartBoxListWrapper ul, #ezPageBoxList ul {
	list-style-type: none;
}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
	margin: 0;
	padding: 0.2em 0em;
} 

#cartBoxEmpty, #cartBoxVoucherBalance {
	font-weight: bold;
}

.totalBox {
	width: 5.5em;
	text-align: right;
	padding: 0.2em;
}

.lineTitle, .amount {
	text-align: right;
	padding: 0.2em;
}

.amount {
	width: 5.5em;
}

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
	margin: 0em 1em 1em 0em ;
}

.categoryIcon {}

#cartImage {
	margin: 0.5em 1em;
}

/*Attributes*/
.attribImg {
	width: 20%;
	margin: 0.3em 0em;
}

.attributesComments {}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
	margin: 1em 0em;
}

.centerBoxWrapper {
	border: 1px solid #222;
	margin: 1.1em 0;
	height: 1%;
}

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a, h3.rightBoxHeading, h3.rightBoxHeading a {
	margin: 0;
}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
	padding: 3px;
	font-weight: bold;
	font-variant: small-caps;
	font-color: #C99EA3;
	border-bottom: 1px solid #111;
	background-color: #330006;
}
.leftBoxContainer, .rightBoxContainer {
	border: 1px solid #111;
	margin: 0 0 1em 0;
}

.sideBoxContent {
	background-color: #171717;
	padding: 0.4em;
}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
	text-align: center;
}
#bestsellers ol {
	padding: 0;
	margin: 0 0 0 1.5em;
}

#upProductsHeading {
	text-align: left;
}

#upDateHeading {
	text-align: right;
}

/* categories box parent and child categories */
span.category-subs-parent {
	font-style: italic;
}
span.category-subs-selected {
	font-style: italic;
}
/* end categories box links */

/*misc*/
.back {
	float: left;
}

.forward {
	float: right;
}

.bold {
	font-weight: bold;
}

.rowOdd {
	background-color: #444;
	vertical-align: top;
}

.rowEven {
	background-color: #212121;
	vertical-align: top;
}

caption {
	/*display: none;*/
}

#myAccountGen li, #myAccountNotify li {
	margin: 0;
} 

.accountTotalDisplay, .accountTaxDisplay {
	width: 20%;
	text-align: right;
}

.accountQuantityDisplay {
	width: 10%;
	vertical-align: top
}

tr.tableHeading {
	background-color: #333;
}
#prevOrders td {
	border-bottom: 1px solid #222;
	padding: 0 .5em 0 0;
}
.productListing-rowheading {
	background-color: #171717;
}
.productListing-data {
	padding: .5em .5em;
}
.productListing-data h3 {
	margin: .5em .5em .5em .5em;
}
#siteMapList {
	width: 90%;
	float: right;
}

.ratingRow {
	margin: 1em 0em 1.5em 0em;
}

label#textAreaReviews {
	font-weight: normal;
	margin: 1em 0em;
}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
	background-color: #444;
}

thanks in advance for any help, everybody :)

okay so I took a page out of 'mistakes of the past' and I looked up the post I made a long time ago regarding my current live site... I had forgotten I had padding issues with that site too. This solution is pretty much a cut and paste of what I'd done there, with a few little changes.

I added some stuff to the css stylesheet and put a class in the search header file, because apparently I'd either gotten rid of it or it didn't exist in my current template.

this is what I added to my stylesheet,

#navMainSearch {
	margin:0 auto;
	text-align:right;
	padding:0 5px;
	}
	
#navMainSearch input {
	margin:0 auto;
	text-align:right;
	padding:1px 2px;
	}
	
#navMainSearch input[type=text] {
   	margin: 2px 0 0 1em;
   	}

#navMainSearch input.topSearch{
   	margin: 0 0 5px 2px;
   	padding: 0 0 0 0;
   	vertical-align: bottom;
   	}

and after the max width in the tpl_search_header.php I added 'class="topSearch".

This does the job for now, and now the only thing I'd change is how much space there is between the search and the header image... but that's a problem for another day.

Whew.:bigups:

Good figurin'.:bigups:

I find I can often solve problems if I just talk to myself long enough.

Rob

Hello,

How did you manage to change the button for the search header? It's not in buttons/english.

Thanx

for the site i've been talking about in this post, the button itself was called search_small.gif, found here:
includes/templates/mostlygrey/buttons/english/search_small.gif

are you using a template? sometime the name of the button depends on the template itself. My first website uses a different template (the site in the link in my signature) and the button is called 'button_search.gif'. So it can change based on what template you use.

I recommend using firefox's web developer tools, that way you can see the source path that the button (or anything else) is found under using the 'information' and 'display element information' option. It's saved me a lot of headaches!

Hope this helps, and if there's anything else I can do let me know! :)

misticloudz:

this is what I added to my stylesheet,

#navMainSearch {
margin:0 auto;
text-align:right;
padding:0 5px;
}

#navMainSearch input {
margin:0 auto;
text-align:right;
padding:1px 2px;
}

#navMainSearch input[type=text] {
margin: 2px 0 0 1em;
}

#navMainSearch input.topSearch{
margin: 0 0 5px 2px;
padding: 0 0 0 0;
vertical-align: bottom;
}

> and after the max width in the tpl_search_header.php I added 'class="topSearch".

Thank you very much this works a treat! :clap::clap::clap:

and after the max width in the tpl_search_header.php I added 'class="topSearch".

I am not seeing the "max width" (maxwidth?) in my tpl_search_header.php file and am having this same problem with the search button not aligning. All I see is maxlength. Is max width used in version 1.3.7? Could you show that code snippet from the tpl_search_header.php file?

You can see the alignment issue at: http://www.bhjdynamics.com/

Thank you,
chrx

Try adding this:

#navMain input {float:left;}

You'll have to fiddle with the padding in #navMainWrapper, too.

stevesh:

Try adding this:

#navMain input {float:left;}

You'll have to fiddle with the padding in #navMainWrapper, too.

Thank you stevesh! That got me going in the right direction. I added that, then broke the #navMainWrapper away from #navSuppWrapper, #navCatTabsWrapper. I then added more bottom padding to #navMainWrapper and that took care of it.

Cheers!
chrx

Yes I have noticed that even with the default Zen Cart template, the top search text box and search button do not appear to be vertically aligned perfectly. Even looking at the Template Sample .jpg images via the Admin Template section, you can see this. i.e. the search button appears to be aligned slightly higher than the search text box.

The horizontal top search text box sizing also seems out of whack ( i.e. it's too small to fit the text label "Enter search keywords here" and again this appears in the sample default template image also. It seems odd they have not fixed this in the default template as it's a pain to try to fix.

I would expect them to get the default template perfect. I'm thus left wondering why this aspect seems deficient in meeting this basic standard..