SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Google custom search engine result box appears under dropdown menu

    Hello,

    I am using overlay search result box for topical Google custom search engine for my website (http://theoff.info/Ladakh-Tourism/Ho...uesthouse.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. #2
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Giving your header a z-index of 1 seems to do it:

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

  3. #3
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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)
    Code:
    #nav {
        font-family: Book Antiqua;
        font-size: 15px;
        font-weight: 300;
        position: relative;
        text-align: left;
        z-index: 999;    /* Delete */
    }
    Main-Style-Sheet-2014.css (line22)
    Code:
    #MainContent {
        background-color: #FFCC00;
        height: 650px;
        position: relative;    /* Delete */
        width: 800px;
        z-index: 100;    /* Delete */
    }
    Hotel-Homestay-Guesthouse.html (line 43)
    Code:
    #transbox {
        background-color: #FFFFFF;
        border: 0 none;
        height: 110px;
        margin-left: 250px;
        margin-top: -250px;
        position: absolute;
        width: 400px;
        z-index: 2000;   /* Delete */
    }
    Hotel-Homestay-Guesthouse.html (line 55)
    Code:
    div.cse-overlay {
        position: absolute;
        z-index: 2000;   /* Delete */
    }
    default+en.css (line 226)
    Code:
    .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%;
        z-index: 1;    /* was 100002 */
    }
    default+en.css (line 264)
    Code:
    .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%;
        z-index: 100001;    /* Delete */
    }

  5. #5
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    According to Firebug, this is where default+en.css is located:
    Code:
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •