Google CSE placed in Notice Manager displays black table borders

[tambo]

Hi there,

I act as an Admin for a large message board running on vB 4.1.4.

I do not currently have server access - nor any config or CSS files - only what's available via Admin CP. However, I was hoping somebody could advise me on how I (or our engineer who does have server access) could resolve the following problem.

We have recently reintroduced a Google CSE to assist our members in searching for three-letter acronyms. For ease of implementation, we've placed the Google code snippet (shown below) as a global notice in Notice Manager.

When we do this, we get a series of black table borders around each element of the Google CSE. The borders were also present when search results were displayed on the same page (although I've opted to return the results on a separate page until I can solve the problem).

This is a screenshot:



Link: http://www.bluelight.ru/vb/forum.php

When the code is placed outside of the vB environment, there's no black border. I've tried to find other advice on this matter, but I've not found an adequate explanation as to what's going on?

Has anybody else experienced this? Can anybody offer a suggestion on what might be causing it? I assume some table attribute is being applied from the CSS file???

Any ideas would be appreciated.

Thanks,
tambo

<font size="1"><b>Search <a href=http://www.bluelight.ru/vb/forum.php>Bluelight</a> with Google...</b></font> 
<div id="cse-search-form" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl(
      '*********************:**********', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.enableSearchboxOnly("http://www.google.com/cse?cx=*********************:**********", null, true);
    customSearchControl.draw('cse-search-form', options);
  }, true);
</script>

<style type="text/css">
  input.gsc-input {
    border-color: #5D80B0;
  }
  input.gsc-search-button {
    border-color: #5D80B0;
    background-color: #6F91BD;
  }
</style>

(Google ID has been removed)

[tambo]

After asking around, one of our members spotted the troublesome class, which was:

.restore td{border:1px solid #000000;

We added the following code before the Google CSE code shown above:

<style type="text/css">
  .restore td {
    border:1px solid #EDF0F2;
  }
</style>

We changed the border colour to suit our background (#EDF0F2), but one could just as easily reduce the border px value.

Hoping this helps somebody else.

TM