Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Google Search, iframe and scroll bars

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #25059
    ptrautwein
    Member

    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.

    #58660
    AshtonSanders
    Participant
    "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

    #66998
    PsyChQPaTh
    Member

    i need this code for ie8

    Thanks all

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.