IFRAME overflow in IE and Firefox

Forum Moderators: open

Message Too Old, No Replies

IFRAME overflow in IE and Firefox

alkaholik

8:19 am on Oct 9, 2006 (gmt 0)

I have a site where I have a limited space for tables. I have a scoreboard table on my site which is just an IFRAME using <snip> I have added overflow-x:hidden to the iframe and it works perfectly in firefox, but when I look on IE it doesn't work.

mysite: <snip>

Anyway is there a way to fix this?

Also when I load it in IE it gives me a javascript error on my page telling me that something on the page im loading isn't has an error. The problem is I don't have access to their site so I can't fix it.

Thanks in advance,

Kevin

[edited by: tedster at 4:01 pm (utc) on Oct. 9, 2006]
[edit reason] No urls, thanks. See TOS [webmasterworld.com] [/edit]

tedster

5:24 pm on Oct 9, 2006 (gmt 0)

Welcome to the forums, alkaholik. To be of any help, we're going to need more details on what you mean by "doesn't work". Perhaps a short snippet of your code would help make it clearer, too, along with the details. Just change any urls to "example.com" so the sites involved can stay anonymous.

penders

6:11 pm on Oct 9, 2006 (gmt 0)

...an IFRAME ... I have added overflow-x:hidden to the iframe and it works perfectly in firefox, but when I look on IE it doesn't work.

IE6 doesn't seem to support any kind of overflow property very well on an IFRAME element - as far as I can tell?! overflow-y is certainly buggy (producing an extra right margin). And to remove the scrollbars completely you need to use the

scrolling="no"

attribute on the IFRAME itself. This certainly seems to be the case under an HTML4.01 Strict DOCTYPE.

Have you tried placing the IFRAME in a DIV container and setting the overflow properties on the DIV container instead? This seems to work OK in FF and IE6, to produce just a vertical scrollbar.

<div id="iframe_container"> 
<iframe id="myiframe" frameborder="0" scrolling="no" width="300" height="500" src="/lorem_ipsum.html"> 
Iframe not supported! 
</iframe> 
</div> div#iframe_container { 
width:318px; 
height:100px; 
overflow-x:hidden; 
overflow-y:scroll; 
}

The extra width on the DIV container is to allow room for the vertical scrollbar. You'll need to set the height of the IFRAME large enough to allow for its entire contents, otherwise you won't be able to get at it - this could be a problem as if it's too large you'll end up with a gap at the end!