Проблема с отображением пользовательского поиска Google в Foundation 3

Я пытаюсь включить пользовательский поиск Google, но он продолжает отображаться неправильно. Значок поиска на кнопке отсутствует, и кажется, что нижняя часть текстового поля обрезана.

Новый участник, поэтому я не могу разместить изображение.

Код

<div id="header">
  <div class="row">
    <div class="four columns">
      <h1><img src="images/QEFLogo.JPG" /></h1>
    </div>
    <div class="four offset-by-two columns">
      <div id="iso" class="hide-for-small">
        <h1>
          <img src="images/ISO9001.jpg" />
          <img src="images/ISO14001.jpg" />
        </h1>
      </div>
      <div id="gcsearch" class="hide-for-small">
        <gcse:searchbox-only></gcse:searchbox-only>
      </div>
    </div>
  </div>
</div>

Никакого реального CSS, о котором можно было бы говорить...

#gcsearch {
    width:300px;
    position:relative;
    left:-5px;
}

Сценарий не тронут сгенерированным кодом Google.

РЕДАКТИРОВАТЬ Теперь обнаружил, что это проблема. Элемент Google использует файл CSS default.css на своем сервере. Это создает ширину и высоту.

В строке 126 этого листа CSS он определяет...

.cse .gsc-search-button input.gsc-search-button-v2, 
input.gsc-search-button-v2 {
    height: 13px;
    margin-top: 2px;
    min-width: 13px;
    padding: 6px 27px;
    width: 13px;
}

Учитывая, что у меня совсем нет знаний Javascript, почему это происходит и как я могу это исправить?

Я протестировал код на странице, отличной от Foundation, и он отображается правильно.


html css responsive-design zurb-foundation google-custom-search
person Silvermodak    schedule 12.01.2013    source источник
comment
Живой тест @ [qeftest.co.uk]   -  person Silvermodak    schedule 13.01.2013

Ответы (3)


arrow_upward
4
arrow_downward

Это была проблема с фреймворком Foundation. Добавлено следующее к кнопке и решено. Упомянутые классы генерируются Google, поэтому они не отображаются в моем коде выше.

input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
background-image: inherit;
box-sizing: content-box;
}
person Silvermodak    schedule 14.01.2013
comment
была та же проблема, теперь с версией 2 классов Google я добавил следующий css, см. мой ответ ниже. - person Taifun; 05.09.2013

arrow_upward
1
arrow_downward

У меня сейчас была такая же проблема. В версии 2 классов Google я добавил следующий css

<style>
 .cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 {
   background-image: inherit;
   box-sizing: content-box;
   -moz-box-sizing: content-box;
 }
</style>

теперь работает в Chrome и Firefox

person Taifun    schedule 04.09.2013

arrow_upward
0
arrow_downward

В вашем коде слишком много закрывающих тегов </div>. Это делает его недействительным HTML и, вероятно, поэтому он отображается неправильно.

person Fred    schedule 12.01.2013
comment
Изменился и все тот же. Я тестировал на пустой странице, и результаты отображаются правильно, поэтому я думаю, что это как-то связано с базовой структурой. - person Silvermodak; 12.01.2013
comment
Не могли бы вы отредактировать свой вопрос, чтобы код отражал то, что у вас действительно есть? На данный момент у вас есть 6 открывающих тегов <div> и 7 закрывающих </div>. Мы не сможем вам помочь, если не увидим ваш реальный код. - person Fred; 13.01.2013