How Do I Delete 2 Gray, Bordered Boxes Next to Google Custom Search Engine?

HTML & CSS
1

Do you know how to delete the 2 gray, bordered boxes to the right of my Google Custom Search engine here:
www.ComparingVitamins.com? In Firefox, they are both live links to these 2 CSS pages:
http://www.google.com/uds/api/search/1.0/fb730160e72add7b256fbc9b5dc23635/default.css
http://www.google.com/cse/style/look/default.css
How can I make them disappear?

Here is my code…

<div id="cse" style="width: 30%; float: left; text-align: left">Loading</div>
<script src="//www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'en'});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('004167335507867730147:8aewcrcx99a');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setAutoComplete(true);
    customSearchControl.draw('cse', options);
  }, true);
</script>
<link rel="stylesheet" href="//www.google.com/cse/style/look/default.css" type="text/css" />

When I delete the last line <link rel…, one box disappears. But how can I make both boxes disappear?

Thank you for your help,

Greg

2

Hi Greg. Welcome to SitePoint.

You shouldn’t have <link> elements in the body of the page. Try moving this line in the <head> of the document:

<link rel="stylesheet" href="//www.google.com/cse/style/look/default.css" type="text/css" />

You should also get rid of these divs from the bottom of your <head> section:

<div id="headtop">

<div id="headimg">

</div></div>
3

Hi Ralph,

Thanks for the advice. That got rid of one box. But the other one still shows and links to:
http://www.google.com/uds/api/search/1.0/fb730160e72add7b256fbc9b5dc23635/default.css

Any more ideas on how to delete it?

4

O, there’s another one in your HTML:

<link rel="stylesheet" type="text/css" href="http://www.google.com/uds/api/search/1.0/fb730160e72add7b256fbc9b5dc23635/default.css">

Move that to the <head> too. (Assuming it’s needed at all. I’m not sure.)

5

Hmm, I just opened View Source and found all that code. But it’s not in my header so I can’t edit it there. So it must be called from my Google CSE settings on their site, right? Google Custom Search - Site search and more I just looked there, but I don’t know which setting would edit that problem. (Unfortunately, Google did not answer my question or most questions in their Help Forum.)

6

O well, another option is just to place this in your style sheet, perhaps at the bottom:

link {display: none;}

It’s a shame to have to, though. The code is a bit of a mess. the <link> code must be added via JS or something. Google does know how to offer up some pretty messy code. :frowning:

7

That makes sense. But which stylesheet: Google’s or mine? (I tried it in mine, and it deleted the box, but also some of my other links.)

8

It will have to be yours, as you can’t change Goggle’s.

I’ve never seen styles for <link> elements before, as they are meant to be in the head, so I’m worried that you have them all over your page. Anyhow, you could target just the Goggle links with this in your stylesheet:

link[href^="http://www.google.com"] {display: none;}

Just so you know, though: that kind of CSS rule won’t work in older browsers like IE6 and below (not that I care about IE6 any more, mind you).

9

I don’t have any style links in my page. Apparently they’re being called from my program settings at Google?

I tried putting that in the Body of my stylesheet, but it didn’t work. Was that the right place to put it? Why is the ^ symbol in there?

10

Hm. Well, I wouldn’t think it’s a problem if they are all visually hidden, then. They have no place on a web page. What other things on the page were affected by my first CSS rule? I didn’t see anything else change.

I tried putting that in the Body of my stylesheet

Not sure what you mean by that. Do you mean as part of the body {} styles? Just place the rule (the whole line I gave) on its own line in the CSS file, separate from anything else, perhaps right at the bottom.

Why is the ^ symbol in there?

That just says choose any <link> element that has an href attribute that starts with http://www.google.com.

It’s called an attribute selector. There are other similar markers for ‘ends with’ etc.

11

I just placed it before the /* @end */ of stylesheet, and it worked! Thank you very much for your help Ralph. If you ever have a question on direct response advertising or copywriting, let me know if I can help you.

12

Thanks Greg! And glad it worked.