Search box header height

I have read all of the threads about the search box height but either there weren't any replies or the answers given didn't work for me. I know this is probably basic css, but I just can't figure out how to do this.

I am using an image for the side boxes that is set in size. It doesn't look right if it repeats. The search box header is about 2-3 pixels bigger in height than all of the others. I need to either reduce this so that it matches the others (preferred) or make a larger image and have it show up just in the search box header.

Can someone please help me with this? I've been trying to figure this out for two days now and it's driving me crazy!

Thanks in advance! :smile:

For question regarding html code and such, please always provide a link to your site so we can check on it for you.

Sure, it's just a test site that I'm using to learn zencart.

http://www.artofstitching.com/shopping/

If you notice, the search box header image starts to tile and doesn't look right.

Hi!
I am actually struggling with the same problem. And it is not only the search heading box, but also the manufacturers heading box. Maybe someone can help us?

Have you tried :

background-repeat: no-repeat;
in the style sheet,
inside the code where you put the link to your background image?

Try

#searchHeading label {line-height: 1.1em;}

Make a similar declaration for any other box headers that need reducing.

missuseless, I didn't get a chance to try what you suggested but thank you for trying to help!

Glenn, thank you very much! That worked perfectly. I was close, but didn't quite get it right. If you were in the room I'd give you a big old sloppiy kiss right on the forehead. :hug:

I'm just so excited to finally get it fixed, can you tell? Perhaps I need to get a life... :laugh:

missuseless, I hope this works for you as well!

Thank you again, both of you!

Hi Glenn,
thank you very much. You solved my problem.

This is for Karen:
If you decide to have font instead of a picture in your heading, you got to change your code to:
h3.leftBoxHeading, h3.leftBoxHeading a, h3.leftBoxHeading label,

h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label {

font-size: 1em;

color: #your color;

}

that solves the problem with the different font sizes of the headers.
I hope you can carry on with your work.
bye

Actually, the image I used was for the background and so the font size did need to be adjusted. I was concentrating so much on the height of the search that I didn't notice the slight difference in the font sizes.

Thanks for bringing it to my attention. I've adjusted the code so now it's all the same.

Thanks again!

missuseless:

Hi Glenn,
thank you very much. You solved my problem.

This is for Karen:
If you decide to have font instead of a picture in your heading, you got to change your code to:
h3.leftBoxHeading, h3.leftBoxHeading a, h3.leftBoxHeading label,

h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label {

font-size: 1em;

color: #your color;

}
that solves the problem with the different font sizes of the headers.
I hope you can carry on with your work.
bye

Hello,

I am having the same problem with the search box height..
I tried the proposed approach, but does not work on the site..

can somebody please take a look at the site and advise how I should go about fixing the height on the search?

the site address;

http://www.superhairfactory.com/shop/

I am using v1.3.9h

thank you very much

Are you referring to the search box in the header? There is no other search currently visible while you are in maintenance mode...

If you want to move the header search down, find in your stylesheet```
#navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}

Remove the #navMainSearch, from that rule and add a new rule like```
#navMainSearch {margin:0.5em 0 0; padding: 0.5em 0 0;}

If you want something else, you will have to let us see where it is.

gjh42:

Are you referring to the search box in the header? There is no other search currently visible while you are in maintenance mode...

If you want to move the header search down, find in your stylesheet```
#navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}

> Remove the #navMainSearch, from that rule and add a new rule like```
#navMainSearch {margin:0.5em 0 0; padding: 0.5em 0 0;}

If you want something else, you will have to let us see where it is.

Dear gjh42,

Thank you very much for your fast reply.
Yes, I mean the search box in the header. It looks quite inconsistent with other bars.

I could not find the code in stylesheet:

#navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription {

It does have a section though:

#navMainSearch {

float: right;

}

So I just pasted the proposed code into stylesheet.css, but nothing happened.

#navMainSearch {margin:0.5em 0 0; padding: 0.5em 0 0;}

I am using zen cart v1.3.9h and the file is in /includes/templates/template_default/css

Please help...

Thank you very much
Tate

The stylesheet is one of a few files that will always be located in your custom template folders - the /template_default/ version will be irrelevant.

Look in /includes/templates/your_template/css/stylesheet.css.

gjh42:

The stylesheet is one of a few files that will always be located in your custom template folders - the /template_default/ version will be irrelevant.

Look in /includes/templates/your_template/css/stylesheet.css.

Hi gjh42,

You are very good... thank you.. I think we are getting close, but not there yet..
I can see the height of the bar is reducing after I modified the file as instructed, but it is not yet consistent with others.

Any way I can reduce even more?

Thanks a bunch --

Tate

You have a duplicate stylesheet named stylesheet!.css, and that will override many changes you make in stylesheet.css. If you wanted a backup copy, you need to save it elsewhere, or else name it like stylesheet.bak, as anything named style*.css will be loaded in alphabetical order.

The major element taking extra height there is a <br class="clearBoth">, which you would have to change in tpl_header.php. You could replace it with <div class="clearBoth"></div> which will have no height.

gjh42:

The major element taking extra height there is a <br class="clearBoth">, which you would have to change in tpl_header.php. You could replace it with <div class="clearBoth"></div> which will have no height.

Thank you very much.. this is a good place indeed and I really appreciate your help ~

Tate

tate:

Thank you very much.. this is a good place indeed and I really appreciate your help ~

Tate

Dear gjh42,

It is Tate again...

I found what was modified does not work on IE.. as most of my customers are IE users.. I need to optimize the layout for IE..

Have a few questions and help you can lend me a hand --

the site (please use IE to view the link below):

http://www.superhairfactory.com/shop/index.php?main_page=down_for_maintenance

1. I would like to move the search box in the top header to the right side of the header (all the way to the rightmost), how should I modify it?
2. the "Home :: Down for Maintenance" is a bit too high (what is this called? ezpage?) and it takes the space for the top banner, how should I modify the system?
3. the bestseller sidebox on the right, like point 2, is too high, how should I modfiy the system? so the sidebox is as high as the category side box on the left?
4. how do I modify the height of the top header like what was asked in the previous posts for IE?

Thank you
Tate