Google Search, iframe and scroll bars

[ptrautwein]

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.

[AshtonSanders]

"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

[PsyChQPaTh]

i need this code for ie8

Thanks all

[Author]

Posts