Something 'funny' is going on with the Google Custom Search that I embedded in my website:

www.chisagocountyhistory.org

When I search for a term, the application finds relevant items and posts them to an overlaid screen that pops up as expected. But some of my underlying page bleeds through, making the results very difficult to distinguish. When I click one of the search results, it does open another tab in the brower(s) [IE, Chrome, & Firefox] and displays the results.

Here's the code Google generated and I used:

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

I don't know whether this is an issue with VSD or Google Custom Search. Has anyone encountered this before and got it working properly? I feel 'really close' to this working but I don't have any experience with this feature.

A follow-up from additional experiments with the Google Custom Search feature.

There are a variety of 'layouts' that can be selected to display the results of a Google Custom Search. Many of them overlay the webpage with the search results while a couple others open an additional tab where the search results are displayed on a plain white page. I chose that alternate method for the time being.

It would be great if someone could identify the problem with the underlying webpage text bleeding through into the search results box.

I don't see anything bleeding through as it opens a completely different page.

I'll change it back to the desired configuration that shows the problem. It should be up within 10 minutes or less.

It's a z-index issue. It's difficult to handle this with VSD and text boxes. One option is to use advanced text in any text boxes that are showing through.

Okay, it looks like I need to put on my 'learning cap'... I'll Google 'A z-index issue' to see what I can find out about that term. I'll change the page back to something useable for the time being.

Thanks for the help!

z-index is how high above the rest of the content an element or item should be so it doesn't overlap other things. It's not a height/width type thing, but an elevation type thing. Think of it as the item coming towards you out of the screen rather than up or down the screen if that helps.

You can add that to your CSS with this code setup. Not sure how it's done in VSD so hopefully Eric can help there:

z-index: 100;

Add that to the class or id that you're using for the item you're wanting to edit and that should fix you up. That number can be adjusted, many times I set it at 1000 instead of 100 to make sure it's definitely the top most item. Hope that helps

Thanks for the overview Jo Ann. I did some online reading and got up to speed on the concept. The z-index function in html appears to mimic the 'layers' function in Photoshop, thereby allowing you to adjust the order of the 'stack' of information/images for presentation.

Now that I understand the concept all I need to figure out is if and how I can implement a z-index command within my manually inserted html text window in VSD (the code I quoted above).

Regarding Eric's suggestion of manipulating the other text boxes on the homepage, the content changes often enough to make this approach 'inconvenient'. I can settle for the method of the Google
Custom Search calling a blank page, but it would be nice if I could get the overlay working properly.

Additional ideas for coding would be appreciated.

I have a similar question about popup pictures but will create a separate thread with that.

I know those text boxes are going to be an issue. I tried a few things but none returned the results I would want. The one thing that may work that I haven't tried yet, was to tie the search box to an onclick event and launch either a html popup or a Colorbox overlay.