Google custom search engine result box appears under dropdown menu

HTML & CSS
1

Hello,

I am using overlay search result box for topical Google custom search engine for my website (http://theoff.info/Ladakh-Tourism/Hotel-Homestay-Guesthouse.html) that has a dropdown menu.

I have given highest z-index to .cse-overlay. But menu overlaps the CSE search result box.

Could you help me in solving the z-index problem?

Thanks

2

Giving your header a z-index of 1 seems to do it:

#Header1 { position: relative; z-index: 1; }

3

Hi,

If I change z-index of #header1 to 1, the second level of my drop down menu disappears behind the #main-content that has z-index: 100.
So, what should be the z-index of #main-content, #header1, .cse-overlay, and #nav?

Thanks

4

Did you know that browsers reduce those exaggerated z-index number to simple 1-2-3 sequential layers?

To that end, and to fix your menu, consider making the following changes:

3L-Menu-StyleSheet.css (line 27)


#nav {
    font-family: Book Antiqua;
    font-size: 15px;
    font-weight: 300;
    position: relative;
    text-align: left;
    [color=red]z-index: 999;    /* Delete */[/color]
}

Main-Style-Sheet-2014.css (line22)


#MainContent {
    background-color: #FFCC00;
    height: 650px;
    [color=red]position: relative;    /* Delete */[/color]
    width: 800px;
    [color=red]z-index: 100;    /* Delete */[/color]
}

Hotel-Homestay-Guesthouse.html (line 43)


#transbox {
    background-color: #FFFFFF;
    border: 0 none;
    height: 110px;
    margin-left: 250px;
    margin-top: -250px;
    position: absolute;
    width: 400px;
    [color=red]z-index: 2000;   /* Delete */[/color]
}

Hotel-Homestay-Guesthouse.html (line 55)


div.cse-overlay {
    position: absolute;
    [color=red]z-index: 2000;   /* Delete */[/color]
}

default+en.css (line 226)


.gsc-results-wrapper-overlay {
    background: none repeat scroll 0 0 #FFFFFF;
    border: medium none;
    border-collapse: separate;
    border-radius: 1px;
    box-shadow: 0 3px 10px rgba(34, 25, 25, 0.4);
    height: 80%;
    left: 12%;
    margin: auto;
    opacity: 0;
    overflow: auto;
    padding: 30px;
    position: fixed !important;
    top: 5%;
    transition: all 0.25s linear 0s;
    visibility: hidden;
    width: 70%;
    [color=blue]z-index: 1;[/color]    /* was 100002 */
}

default+en.css (line 264)


.gsc-modal-background-image {
    background-color: #FFFFFF;
    display: none;
    height: 130%;
    left: 0;
    opacity: 0;
    position: fixed !important;
    top: 0;
    transition: all 0.25s linear 0s;
    width: 100%;
    [color=red]z-index: 100001;    /* Delete */[/color]
}
5

Hi Ronpat,

Thanks for detailed reply!

I have one question regarding implementation of the solution provided: I have checked my Google custom search engine account for default+en.css file that also needs editing. I found default.css file that neither feature .gsc-modal-background-image class nor .gsc-results-wrapper-overlay class. My CSE’s default.css file does not even feature z-index.

From where I can download default+en.css file for my CSE.

Bye

6

According to Firebug, this is where default+en.css is located:


http://www.google.com/uds/api/search/1.0/ee93f9aae9c9e9dba5eea831d506e69a/default+en.css

You really should not make changes to any of the WordPress (or Google) style sheets. Changes should be in the form of overrides to the WP styles and should be made on your local.css stylesheet (which you don’t seem to have). The reason is because any WordPress update to the master WP styles would wipe out your changes. So it is best if you make your changes on local.css… and be sure that it’s loaded last so it overrides the WP style sheets.