Twenty Twelve search button lower than text entry box.

Looks fine to me (chrome)… which browser are you using. Please also provide a screenshot

Hi salsaturation,

I’m using IE but I see the problem also in Chrome. The search button is one or two pixels less high than the search field.

I have a screenshot but I don’t know how to send it to you.

Still cant see the issue. Use on of the file share utilities like dropbox

I have another solution:

https://www.column-razenberg.nl/wp-content/uploads/2014/01/Knipsel.png

If you don’t already have a custom.css you should install a plugin like custom CSS plugin then add the following to the custom css area.

button, input, textarea {
padding: 0.328571429rem;
}

Hi Salsaturation,

The code changes the field or the button. So it’s the right code to change. But the search field goes down now. See:

https://www.column-razenberg.nl/wp-content/uploads/2014/01/Knipsel2.png

Try changing it to this

input {
padding: 0.328571429rem;
}

Looks perfectly aligned to me. Even if you get it perfect on the browser you are looking at chances are you might affect another browser

Hi salsaturation,

Now it’s almost perfect in Chrome but not yet in IE.

See: https://www.column-razenberg.nl/wp-content/uploads/2014/01/Knipsel3.png

I wonder if the problem is caused by the translation. Otherwise more people should have this problem.

As I said you will get it perfect on one and affect another one. Different browsers have different default styling for things like this so unless yo want to get into css reset you should probably just leave it otherwise you will be making changes back and forth

Hello,

I have the same issue with the search box in the header of my site I’m currently building:
https://flugplatz.tagblatt.de/

The button appears two pixels less high than the search field when viewed in Firefox 27.0.1; If viewed in Internet Explorer, it looks like the button actually shrank, missing 2px at the top and 1px at the bottom – I know that IE likes to mess things up a lot, but it should at least work in Firefox.

I inserted the box with the following code in the (child) header.php:

<div class="searchform-header">
<?php get_search_form(); ?>
</div>

And formatted it with this CSS code:

.searchform-header {
	float: right;
	margin-top: 59px;
}

I use Twenty Twelve modified by a child theme. The issue is still present when I switch back to the clean Twenty Twelve theme.

@jordh

did you try the above code?

I did, the first code

button, input, textarea {
padding: 0.328571429rem;
}

reduced the height of the text box by some pixels (making the button appear out of place even more), while the second code

input {
padding: 0.328571429rem;
}

showed no effect at all.

@jordh

I tried both and they both have and effect – where exactly did you put the code… in your child css?