Hi,
I have a page with an iFrame div element id=testimonials2 which as overflow: auto and works in Firefox but not in IE 8.
noschalets . com / new / contact.php
CSS for the testimonials2 id:
#testimonials2 {
height: 900px;
width: 482px;
border: thin solid #BCB281;
overflow: auto;
}
Is there a way to get this working in IE? Thanks for your help!
Frank
Hi, try wrapping the <iframe> within a <div> and give that the height and overflow 
Ok I’ve wrapped the iFrame within a div and it works, thanks Ryan! only thing now is that the horizonal srcoll bar appears at the bottom but I’ll try to figure it out myself, thanks again for your quick reply!
Frank
Ok if you want to work it out yourself I will honor that (you should try that to begin with) however if you want help just come back here and we will get it sorted :).
Great thanks Ryan!
Hi again Ryan,
For the most part I managed to get the overflow working in IE, FF, Safari but there’s one little nagging issue I can’t get over, and it only happens in IE, which leads me to think it might be an IE bug, in any case it has to do with a small gap at the bottom of the iFrame, when you scroll all the way down, there’s about a 15px white space which is driving me nuts. I went over all the css, and code and can’t seem to find anything wrong. The page is a bit complicated as it uses 2 style sheets and whats perplexing also is that it works fine with one of the style sheets but not the other which has the identical css styles except for colors. It actually works in IE for one of the style sheets so… I’m guessing it can’t be a bug! really strange, not sure if you can help but here’s the css for both sheets, really appreciate your time and help on this.
Hi,
I believe the gap is from the iframe source page. If you add html,body{margin:0} to the source page the gap will disappear (if you have access to the source page of course).
Note that the source page should be a full valid html page and not just a section of html.
Overflow Hidden on the iframe might give you what you need if you don’t have acces to the iframes source.
Eric, he had overflow:auto; on the iframe to begin with but IE8 wasn’t recognizing it :).
Yes you can’t influence anything in the iframe content from outside. If the background is in the iframe then that’s where you must address the issue.
Yes Ryan, I read it. If I was wrong it’s because I was wrong (nothing more). I know you can’t change anything in the iframe. But, you can control the iframe itself. That is, as long as it’s supported. That’s why I said maybe. Sounds like it won’t work in this case. But if you had a fixed height content in the iframe (picture or movie) then a height on the iframe and overflow hidden on it would hide any HTML/body padding/margin.
What you can do is. If the contents of the iframe don’t really change. You can copy the code from the iframe, put html/body margin/padding 0 in it, then host the iframe on your server.
As an aside, if you google long and hard enough (as I did a while back), you can find some back-alley JS that claims to be able to target the contents of an iframe. I know how implossible this sounds because of security issues. I’m just saying what I was able to find. I found a more siutable route though so I never tested it.
I know iframe with a fixed height/overflow auto didn’t work, however I’ll make a quick test case in IE8 to see if it respects overflow hidden, or if it just ignores it altogether.
As an aside, if you google long and hard enough (as I did a while back), you can find some back-alley JS that claims to be able to target the contents of an iframe. I know how implossible this sounds because of security issues. I’m just saying what I was able to find. I found a more siutable route though so I never tested it.
You are making me start a google rampaage now :D.
Hey Guys,
Thanks a lot for all your help on this issue. I feel silly to report that the page now… works?! I didn’t change anything, I restarted the computer and I could have swore I cleared all cache each time I reloaded the page, but perhaps it doesn’t refresh the iFrame source not sure?! but the gap has disappeared, was very fustrating not knowing but glad its resolved
To get the scroll working on a fixed height and width, I placed the scrolling=“auto” within the iFrame tag itself and not the css id “testimonials2” like this:
<iframe src=“testimonials.php” name=“testimonials2” width=“482px” height=“900” align=“left” scrolling=“auto” frameborder=“no”></iframe>
I used the css to style the iFrame with a thin border thats all, didn’t use overflow feature in there. Seems to work nicely now without a horizontal scroll bar at the bottom.
Thanks Again!
Frank
Page looks good :). Glad you got it sorted.
Yup thats for your help Ryan.