Chrome and Firefox are apparently thinking in opposite directions about whether a border should go in or out of the box even when a height is assigned. I ended up not using a border, assigning width and height, and then using a fieldset to wrap the sucker.

Go figure I hit a roadblock with CSS3 border radius applied to the fieldset not properly cropping the inputs inside.

Image replacement is looking mighty fine in hindsight.

I hope that helps. If not, and you feel comfortable doing so, send us a note using our contact form with the link to your page, along with exactly what you are trying to do, and we will try to point you in the right direction. You can also drop the link here, if that is easiest.

I am a self taught html coder..lol….sorry but thats kind of funny…ANYWAY. I’m teaching myself and need some help. Im too talented to not be able to do this on my own.

Any help would be appreciated. My biggest concern really is what to do with the code for these forms and where to put it once i figure it all out.

Nora S

Are you using a code editor or are you using the theme editor within WordPress? If you are relatively new to coding, I would recommend using a code editor to get the job done. You will have to FTP your revisions to your theme folder, but it gives you more control over your work. Otherwise, you will be spending time searching for duplicate styles without knowing what line number these styles are on. Also, if you are using Firefox, I would recommend installing the Firebug extension to help you route out problems in coding.

You must make sure you have a template in your theme called search.php. This file does not create search results, but is the template for the search results page. If your results aren’t working I would check there first to see what the possible issue may be. The file must contain the conditional PHP statement <?php if (have_posts()) : ?>. Before you customized your search form, were the results working?

The tutorial was missing the lines of javascript to handle the “enter keywords” text disappearing while on focus. The snippet has been added. Thanks for catching that.

Lastly, in CSS, #searchsubmit and input#searchsubmit will be treated exactly the same. The # translates as id. I saw an instance in your coding that had one of each.

2. You have two styles for input#s: one starting at line 19 and the other starting at line 47. Was that intentional? If not, I would remove the one that is not needed.
I don’t have line numbers to look at so if you mean the id “#s” I should remove that?
My theme has its own codes so some may be similar.

3. You have set up a padding-right of 115px on the input#s, which you took from the code in the tut. The problem here is you changed the width of your search input and therefore have the adjust the padding accordingly.
I am trying different numbers since I cannot get the exact sizes as I had in my Photoshop images. For some reason the images or areas are not coming out like the images you had us make in the tutorial.

4. You also have two styles for input#searchsubmit: one starting at line 60 and another starting at line 70. Again, I would remove the one that is not needed in this case.
I only see one entry for “input#searchsubmit:” – where is the other one? I don’t have any line numbers.

5. Yes, the input background with the two different magnifying glasses should be one image sprite. You change the background position using jQuery and CSS. Make sure you’ve added a class named .focus and have adjusted the background position.
I tried this and it doesn’t work. I put the jQuery code in the header.php file like you said, but still doesn’t work. The images don’t swap.

Finally, the form itself doesn’t work, either. I have tried typing in words and hitting the “submit” button and I go to my 404 page. Also, I have yet to figure out why I am getting a blue box with a thin black border around the submit button. Maybe something in the theme code?

I’ve taken a look at your code and noticed a couple of issues you are probably not aware of:

1. On line 32 of your style.css file, your width should be 180px.
2. You have two styles for input#s: one starting at line 19 and the other starting at line 47. Was that intentional? If not, I would remove the one that is not needed.
3. You have set up a padding-right of 115px on the input#s, which you took from the code in the tut. The problem here is you changed the width of your search input and therefore have the adjust the padding accordingly.
4. You also have two styles for input#searchsubmit: one starting at line 60 and another starting at line 70. Again, I would remove the one that is not needed in this case.
5. Yes, the input background with the two different magnifying glasses should be one image sprite. You change the background position using jQuery and CSS. Make sure you’ve added a class named .focus and have adjusted the background position.

I hope that helps.