title: Google Custom Search display issue in Foundation 3
body: <p>I am trying to include a Google custom Search but it keeps displaying incorrectly. The search icon on the button is missing and it looks as if the bottom of the textbox is cut off.</p>
  
  <p>New member so I can't post an image.</p>
  
  <p>Code</p>
  
  <pre><code>&lt;div id="header"&gt;
    &lt;div class="row"&gt;
      &lt;div class="four columns"&gt;
        &lt;h1&gt;&lt;img src="images/QEFLogo.JPG" /&gt;&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="four offset-by-two columns"&gt;
        &lt;div id="iso" class="hide-for-small"&gt;
          &lt;h1&gt;
            &lt;img src="images/ISO9001.jpg" /&gt;
            &lt;img src="images/ISO14001.jpg" /&gt;
          &lt;/h1&gt;
        &lt;/div&gt;
        &lt;div id="gcsearch" class="hide-for-small"&gt;
          &lt;gcse:searchbox-only&gt;&lt;/gcse:searchbox-only&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>No real CSS to speak of...</p>
  
  <pre><code>#gcsearch {
      width:300px;
      position:relative;
      left:-5px;
  }
  </code></pre>
  
  <p>The script is untouched from the generated code by Google.</p>
  
  <p>EDIT Now found that this is the problem. The Google element uses the CSS file default.css on their server. This generates width and height.</p>
  
  <p>On line 126 of that CSS sheet it defines...</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Bearing in mind I do not have much Javascript knowledge at all, why is this happening and how can I fix it? </p>
  
  <p>I tested the code on a non Foundation page and it renders correctly.</p>