Google Custom Search (CSE) adjust margin of text input

Question

I'm having issues with a Google custom search box - the text input looks fine until you start typing into it, at which point the text "jumps" down. You can try it out here: http://ccbriefing.corporate-citizenship.com/

I've worked out that I can adjust the top margin to make it line up as follows:

table#gs_id50 {margin-top: -13px !important;}

However, this also affects the input box when nothing is typed in, meaning that it appears too high up, until you start typing!

Is there a way to only adjust the margin when text is entered into the box?

Many thanks for the help,

Charlie

Answer 1

The custom search control contains an <a> element that contains the X button. That element is inheriting height and line height from the menu. When the X button is visible it stretches the table vertically along with it.

The solution is to undo the inherited rules for that element. An example would be:

#menu .gsst_a a {
    height: auto;
    line-height: normal;
    padding: 3px 0 0 0;
}

Or better, revise your CSS so that menu rules do not affect the search box.