search box in header osc 2.3.1

[blr044]

 

As you can see I added a search box to the header. What I am trying to do is to have it look something like this:

 

 

But the box is beneath the background image instead on top of it.

 

Below is the css and html code:

 

#header_search {
margin-top: 10px;
text-align: right;
padding-right: 20px;
font-family: tahoma, verdana, arial;
font-size: 12px;
color: #21EEFA;
font-weight: bold;
background: url(images/az_menu_on.jpg) no-repeat;
width: 154px;
}

#header_search input {
border: 1px solid #21EEFA;
}


<div id="header_search">
<form action="advanced_search_result.php" method="GET">
<input type="text" name="keywords">  
<input type="submit" value="Search!">
</form>
</div>
</div>

 

Below snap is final result:

 

 

So if any member can find a little time to take a look at this to see where I am doing wrong.

 

Thanks in advance.

 

Bennett

[web-project]

check the position of the div, it doesn't state where it's located.

[germ]

You have an errant comma in the code causing the button shift:

 

        <a href="https://www.YOURSITE.com/account.php">My Account</a>,

 

Change change the CSS code you use to this:

 

.searchbox {
height: 92;
width: 177px;
background-image:url('images/az_menu_off.jpg');
background-repeat:no-repeat;
background-position:center bottom;
position:relative;
left:705px;
top:-37px;
}

 

That gets you close (uisng the web developer plugin in Firefox - not sure about IE).

 

Sometimes after changing the stylesheet in order to see any change you have to hold the <Ctrl> key down while doing a page refresh in the browser to force the browser to reload all contents from the server, including the newly changed stylesheet.

 

This works with IE and Firefox.

 

The background image isn't tall enough, or the box is too tall...

 

Take your pick.

 

Not sure what to do about that.

:blush:

[blr044]

I have recreated a new background for the search box, as seen in snap shot below. I am able to move background around and the search input right or left. But just am having a rough time moving it up a little higher. I've used negative pixels, but something is letting it happen. Just in case there is a good tip, I will also add the code for the header and stylesheet:

 

header.php:

<?php
/*
 $Id$

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2010 osCommerce

 Released under the GNU General Public License
*/

 if ($messageStack->size('header') > 0) {
   echo '<div class="grid_12">' . $messageStack->output('header') . '</div>';
 }
?>

<div id="bodyWrapper" class="container_12">

<div class="wrapper">
 <div class="main_container">
   <div class="header_bg">
     <div class="f_left header_store_name"><a href="http://www.GreatDiscounts4u.com/"><img src="images/store_logo.png" alt="Great cookware at GreatDiscounts4u" title=" GreatDiscounts4u - Great cookware " width="302" height="94" /></a></div>
     <div class="f_left header_box_languages"><!-- languages //-->
     <div align="center" class="topboxText1">Language:  <a href="http://www.greatdiscounts4u.com/index.php?language=en&osCsid=925443d596ff2997552669563af70b3c"><img src="includes/languages/english/images/icon.gif" alt="English" title=" English " width="22" height="16" class="vertical" /></a> </div><!-- languages_eof //-->
     </div>		
     <div class="f_left header_box_currencies"><!-- currencies //-->
     <form name="az_currencies" action="http://www.greatdiscounts4u.com/index.php" method="get"><div align="center" class="topboxText1">Currency:   <select name="currency" onchange="this.form.submit();" class="vertical currencies_list"><option value="USD" selected="selected">U.S. Dollar</option></select><input type="hidden" name="osCsid" value="925443d596ff2997552669563af70b3c" /></div></form><!-- currencies_eof //-->
     </div>
     <div class="f_left header_box_shopping_cart"><!-- shopping_cart //-->
     <div class="f_left header_box_shopping_cart_style"><a href="http://www.greatdiscounts4u.com/shopping_cart.php"><img src="images/shopcart_icon.gif" alt="" width="23" height="21" /></a></div>
     <div class="f_left topBoxText"><div class="padding_13"><span class="cartTitle">Shopping Cart:</span>  <span class="cartItems">Items in cart - 0</span></div></div>

   <div class="clear"></div>
   <!-- shopping_cart_eof //-->
   </div>

   <div class="clear"></div>
   </div>
   <div class="f_left"><a href="http://www.GreatDiscounts4u.com/"><img src="images/hd_banner.jpg" alt="Great cookware at GreatDiscounts4u" title=" GreatDiscounts4u - Great cookware " width="959" height="185" /></a></div>

 <div class="clear"></div>

 <!--menu-->
   <div class="menu_nav">
     <div id="topmenu">
       <a href="<?php echo tep_href_link(FILENAME_DEFAULT); ?>">Home Page</a>
       <a href="<?php echo tep_href_link(FILENAME_PRODUCTS_NEW); ?>">New Products</a>				
       <a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>">My Account</a>
       <a href="<?php echo tep_href_link(FILENAME_RESOURCES); ?>">Resources</a>
       <a class="last" href="<?php echo tep_href_link(FILENAME_CONTACT_US); ?>">Contact Us</a>
     <div class="clear"></div>	
     </div>
   </div>
 <!--menu-->

   <div class="searchbox"> 
     <div id="header_search">
       <form action="advanced_search_result.php" method="GET">
         <input type="text" name="keywords">  
         <input type="submit" value="Search!">
       </form>
     </div>	  
   </div	
 <div class="clear"></div>

 </div>
</div>

 

The css:

.searchbox {
height: 92px;
width: 235px;
background-image:url('images/az_menu_off_a.jpg');
background-repeat: no-repeat;
background-position:center bottom;
position:relative;
left:725px;
top:-18px;
}

#header_search {
margin-top: -21px;
text-align: right;
padding-right: 15px;
/*padding-top: -20px; */
font-family: tahoma, verdana, arial;
/*font-size: 20px; */
color: #21EEFA;
font-weight: bold;
}

#header_search input {
border: 1px solid #21EEFA;
/*margin-top: -25px; */
}

 

The snap shot of header:

[germ]

What we have now doesn't look so hot in Internet Explorer 7...

:'(

 

Using Firefox and IE8 (non-compatibility mode) it's about the same.

 

I'll see what I can do.

 

Browsers - Can't live with'em... Can't shoot'em...

<_<

[blr044]

I did try something different today using local host on hard drive. FF, at least search box is located above the image. But IE8, it looks sick (excuse the terminology). :'(

[germ]

If your IE8 looks sick you've probably got it in "compatibility mode".

 

Take it out of that mode then make this change to the stylesheet:

 

#header_search {
margin-top: -21px;
text-align: right;
padding-right: 15px;
/*padding-top: -20px; */
font-family: tahoma, verdana, arial;
/*font-size: 20px; */
color: #21EEFA;
font-weight: bold;
position:relative;
left:0px;
top:-12px;
}

 

I added these lines:

 

position:relative;
left:0px;
top:-12px;

 

Sometimes after changing the stylesheet in order to see any change you have to hold the <Ctrl> key down while doing a page refresh in the browser to force the browser to reload all contents from the server, including the newly changed stylesheet.

 

This works with IE and Firefox.

 

That looks great in my FF and IE8 (non-compatibility mode).

[blr044]

 

This works with IE and Firefox. That looks great in my FF and IE8 (non-compatibility mode).

 

Thank you very much. After using your suggestion, I tried it using IE8, FF 3.6.16 and FF 4.0, and it was a success. You've saved the day.

 

For my info, what is the difference between the two below?

 

margin-top: -21px;

 

and

 

top:-12px;

[germ]

The first is used for top margin.

 

The second for positioning.