Grow your CSS skills. Land your dream job.

Google Search, iframe and scroll bars

  • # June 6, 2009 at 12:41 am

    I just watched your incredibly helpful video #29.

    And so far, I’m on my way to creating a custom search using Googles CSE.

    However, I’ve run into a snag with the iframe that I hope you can help me with.

    I’d like my results to fit inside a specific width/height on the results page. The problem is that I can’t get Safari to display a scroll bar, when the content is longer than the height of the iframe.

    Here’s my test page:
    http://www.paultrautwein.com/testsearch.php
    (search using my last name: "trautwein" and you should get plenty of results)

    This is the CSS that I’m using to style the iframe:

    Code:
    #cse-search-results iframe {
    width: 700px;
    height: 400px;
    overflow: auto;
    border: 1px solid #999999;
    padding: 0 0 0 10px;
    margin-bottom: 10px;
    }

    It works brilliantly in Firefox, but in Safari, the scroll bar does not appear.

    What I’ve tried:
    I removed the height and the overflow from the css and the page will stretch, however, in Safari, the results leave a huge space at the bottom of the page. Another unexpected puzzler. Safari is finking out on me.

    What I have not tried:
    Testing this in IE on a PC. (yikes – one step at a time…)

    Other things going on:
    The actual search box is placed in a PHP include file (my first go at this too – which is working pretty well). The search box will eventually appear on all pages of the final design.

    Safari v.3.2.3, Firefox v.3.0.10

    Final project is for a non-profit. (.org)

    Any thoughts or advice would be appreciated. Thank you.

    Update – with solution

    After a night’s sleep and a "Eureka" moment, I came up with a solution.
    By placing the iframe results into a div container with the ‘overflow: auto’ assigned to the div, it worked.

    Here’s the final css I used:

    Code:
    div.searchcontainer {
    width: 725px;
    height: 400px;
    padding: 0 10px 0 10px;
    border: 1px solid #999999;
    overflow: auto;
    margin-bottom: 10px;
    }

    #cse-search-results iframe {
    width: 700px;
    }

    The "searchcontainer" class surrounds the Google results and displays the way I want it to.
    I’m still getting a weird gap at the bottom of the results in Safari, but I’m guessing that’s more of an issue with the Google code than anything I’ve done.

    And I still need to test it on a PC, but I think I’m on my way.

    # June 6, 2009 at 7:07 pm
    "ptrautwein" wrote:

    And I still need to test it on a PC, but I think I’m on my way.

    It looks good in Firefox 3.0, IE 7 and IE6

    # November 24, 2009 at 5:48 am

    i need this code for ie8

    Thanks all

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".