Google Search in a Div

Hello I am getting an error that my Google Custom search bar
cannot be in a div. Not sure why that is. Is their an alternative way that
I can put it? PAGE

   <script>
                (function() {
                    var cx = '008024285318458230614:whfnj_-zutw';
                    var gcse = document.createElement('script');
                    gcse.type = 'text/javascript';
                    gcse.async = true;
                    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                        '//cse.google.com/cse.js?cx=' + cx;
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(gcse, s);
                  })();
              </script>
              <gcse:search></gcse:search>
            </div>
1 Like

The google search bar is an invalid element as far as the validator is concerned. As long as the search bar works properly, the error is meaningless. The validator flags unknown proprietary tags as invalid.

2 Likes

Oh I see good to know. Is there a list of elements that the validator
does not recognize that I can use for reference?

1 Like

Not that I know of. The validator will help you make your own list, though.

3 Likes

alrighty.

1 Like

I had the same issue and fixed it like this:-

<div class="gcse-search"></div>
4 Likes

ah nice ill try that out.

Very slick, @SamA74. I haven’t seen that before! Noted!!!

Didn’t remember where I found that, but it’s here:-
https://productforums.google.com/d/msg/customsearch/XE-cs3_oVuY/g-L5EEQpXJMJ

2 Likes

If you read the standards you will find a list of valid tags and attributes there. Anything NOT in that list is invalid.

1 Like

gotcha :point_up_2:

You mean setting it up like this right?

<div class="gcse-search">
    <script>
                (function() {
                    var cx = '008024285318458230614:whfnj_-zutw';
                    var gcse = document.createElement('script');
                    gcse.type = 'text/javascript';
                    gcse.async = true;
                    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                        '//cse.google.com/cse.js?cx=' + cx;
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(gcse, s);
                  })();
              </script>
              <gcse:search></gcse:search>
            </div>

</div>

No, you must remove <gcse:search> it will not validate.
Replace <gcse:search> with the <div class="gcse-search">

<script>
                (function() {
                    var cx = '008024285318458230614:whfnj_-zutw';
                    var gcse = document.createElement('script');
                    gcse.type = 'text/javascript';
                    gcse.async = true;
                    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                        '//cse.google.com/cse.js?cx=' + cx;
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(gcse, s);
                  })();
              </script>
              <div class="gcse-search"></div>
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.